关于重走js学习心得

一、回顾知识关于dom结构

这里写图片描述

这就是doucument的来源：html文档中一切皆是节点

每一个html标签都是一个元素节点：

标签中的文字都是文本节点这是啥

标签的属性都是属性节点

二、关于js获取文本框内的值的几个常用方法

实例：

<form name="form1" action="test.html" method="post" >
          <input type="text" name="username" value="传智播客5周年_1"  id="tid_1" >
          <br>
          <input type="text" name="username" value="传智播客5周年_2"  id="tid_2">
          <br>
          <input type="text" name="username" value="传智播客5周年_3"  id="tid_3" >
          <br>
          <input type="button" name="ok" value="保存1"/>
       </form>

（1）document.getElementById：每个元素节点都可以有一个id值，这值是唯一标识，为我们后面获取对象中的摸一个元素奠定了基础

var inputElement=document.getElementById("tid_1");
    //获取的对象的value值
   alert(inputElement.value);输出结果是：传智播客5周年_1
    //同样也可以根据对象获取对象的类型个
   alert(inputElement.type);

（2）document.getElementsByName：每个元素节点都可以有一个name值，这值是唯一标识，为我们后面获取对象中的摸一个元素奠定了基础，这个name值可以相同。

var inputElements = document.getElementsByName("username");
     alert(inputElements.length);输出结果是：3
     当然也可以根据唯一标识获取type等的值

（3）获取多的对象并用数组遍历出来

获取inputElements
var inputElements = document.getElementsByName("username");
for (var i = 0; i < inputElements.length; i++) {
        var inputElement =inputElements[i];
        alert(inputElement.value);
    }
    这种形式一般常用语selection（下拉列表）

（4）根据name获取对象所有,当值改变获取框内改变的值并弹出来

var usernameElements = document.getElementsByName("username");
    for (var i = 0; i < usernameElements.length; i++) {
        var usernameElement = usernameElements[i];
        // alert(usernameElement.value);
        //为每个对象注册onchange事件
        usernameElement.onchange = function(){
            alert(this.value);
        }
    }

三、关于下拉列表的值获取

实例：

 <form name="form1" action="test.html" method="post" >
          <input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>
          <input type="text" name="tname" value="传智播客5周年_2"  id="tid_2"  ><br>
          <input type="text" name="tname" value="传智播客5周年_3"  id="tid_3"  ><br>
          <input type="button" name="ok" value="保存1"/>
       </form>

       <select name="edu" id="edu">
          <option value="博士">博士^^^^^</option>
          <option value="硕士">硕士^^^^^</option>
          <option value="本科" selected="selected" >本科^^^^^</option>
          <option value="幼儿园">幼儿园^^^^^</option>
       </select>

       <select name="job" id="job" >
          <option value="美容">美容^^^^^</option>
          <option value="IT">IT^^^^^</option>
          <option value="程序员">程序员^^^^^</option>
          <option value="建筑师">建筑师^^^^^</option>
       </select>

（1）获取所有的input元素,返回值是数组，并不包含button的value

var inputElements = document.getElementsByTagName("input");
    alert(inputElements.length);
    for (var i = 0; i < inputElements.length; i++) {
        if(inputElements[i].type!='button'){
            alert(inputElements[i].value);
         }
    }

（2）输出type=”text”中 value属性的值不包含按钮(button)

var inputElements = document.getElementsByTagName("input");
    // alert(inputElements.length);
    for (var i = 0; i < inputElements.length; i++) {
        if(inputElements[i].type=='text'){
            alert(inputElements[i].value);
         }
   }

（3）输出所有下拉选 id=”edu” 中option标签中value属性的值，输出所有下拉选内容

  var selectElement = document.getElementById("edu");
    var optionElements = selectElement.getElementsByTagName("option");
    // alert(optionElements.length);
    for (var i = 0; i < optionElements.length; i++) {
        alert(optionElements[i].value);
    }

（4）查看是否有子节点

<script language="JavaScript">
    //查看id="edu"的节点是否含有子节点
    var selectElement = document.getElementById("edu");
    alert(selectElement.hasChildNodes());
    //查看id="tid_1"的节点是否含有子节点
    var inputElement = document.getElementById("tid_1");
    alert(inputElement.hasChildNodes());
</script>

（5）关于元素、文本节点、属性节点的nodeName、nodeType、nodeValue相关操作

首先在上述实例上添加
<p id="pid" name="8888">
        明天上课
</p>
操作如下：
<script language="JavaScript">
    ////////////////////////////////////////////////////////////////////////////////////////////   
    //如果是节点是元素节点：nodeName返回这个元素的名称
    //如果是节点是元素节点：nodeType返回值为1
    //如果是节点是元素节点：nodeValue返回值为null

    //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
        alert(document.getElementById("tid_1").nodeName);
        alert(document.getElementById("tid_1").nodeType);
        alert(document.getElementById("tid_1").nodeValue);

    //如果是文本节点：nodeName返回一个内容为#text的字符串；
    //如果是节点是文本节点：nodeType返回值为3
    //如果是节点是文本节点：nodevalue返回值为文本节点的内容
    //文本节点 id="pid"  输出nodeName nodeType nodeValue

        var pElement = document.getElementById("pid");
        var pTextElement = pElement.firstChild;
        alert(pTextElement.nodeName);
        alert(pTextElement.nodeType);
        alert(pTextElement.nodeValue);

    //如果是属性节点：nodeName返回这个属性的名称；
    //如果是节点是属性节点：nodeType返回值为2
    //如果是节点是属性节点：nodevalue属性的值
    //属性节点  id="pid" 中name这个属性节点  输出nodeName nodeType nodeValue
        var pElement = document.getElementById("pid");
        //获取属性节点
        var pNameElement = pElement.getAttributeNode("name");
        alert(pNameElement.nodeName);
        alert(pNameElement.nodeType);
        alert(pNameElement.nodeValue)
</script>
总结：在这里其他的都是常规操作通过每一个元素的id获取该元素的对象，然后在通过调用nodeName、nodeType、nodeValue的方法获取响应的值，在这里有两个比较特殊的地方比如说：
    <p id="pid" name="8888">
        明天上课
    </p>
我们要想输出<p>标签的文本节点比如说：明天上课；首先我们应该获取“p标签这个对象”，而文本标签是其第一个孩子标签，所以我们需要调用firstChild方法获取该“孩子对象”，再调用nodeName、nodeType、nodeValue获取相关值。
还有获取属性节点的相关值比如说：获取name="8888"，同样我们先获取该标签对象然后使用该对象调用getAttributeNode("属性名")，然后在调用调用nodeName、nodeType、nodeValue获取相关值

（6）关于子节点的各种形式的获取+联系

案例一：

<h1 id="h1">
    明天休息
</h1>
获取明天休息的文本方式有两种
1、明天休息是h1标签的第一个子标签，所以我们用firstChild获取
    >>获取h1标签的对象--   var h1Element = document.getElementById("h1");
    >>利用h1标签的对象调用firstChild获取--var hTextElement = h1Element.firstChild;
    >>并输出--alert(hTextElement.nodeValue);
2、其实可以利用childNodes这个列表来获取，只不过此事列表中只有一个元素
    >>获取h1标签的对象--   var h1Element = document.getElementById("h1");
    >>获取h1标签的孩子列表对象--var hcELement =h1Element.childNodes;
    >>for循环遍历每一个孩子并输出节点值--
    for (var i = 0; i <hcELement .length; i++) {
        var array_element = hcELement[i];
        alert(array_element.nodeValue);
        //其实为了直观一点，我们可以这样
        alert(hcELement[i].nodeValue);
    }

案例二：

<ul>
        <li id="bj" value="beijing">
            北京
                <p>海淀</p> 
            奥运
        </li>
        <li id="sh" value="shanghai">
            上海
        </li>
    </ul>
    分析：北京、奥运、p都是id为bj的孩子标签，所以我们
    获取“北京”和“奥运”只需要调用firstChild和lastChild方法
    而“海定”是p标签的孩子标签，所以要获取文本内容就继续调用firstChild，在这里普及一下姿势
    <p>--父标签
        <p>孩子1--firstChild
            <p>孙子1-再用firstChild获取当前孩子的
            </p>
        </p>
        <h>孩子2---中间的就用childNodes[1]，再用firstChild获取当前孩子的
        </h>
        <h>孩子3---中间的就用childNodes[2]，再用firstChild获取当前孩子的
        。
        。
        。
        。
           孩子n---中间的就用childNodes[n-1]，再用firstChild获取当前孩子的
        </h>
        <p>孩子4--lastChild
        </p>
    </p>

（7）实际应用案例1

》》实际效果

在上方输入框中输入内容，提交后显示在下方表格中
以下是提交后的效果：
这里写图片描述

以下是点击删除时候的效果

这里写图片描述
以下是点击是之后的效果

所有操作均在前端完成，基于js,基于dom

》》分析原理

（1）首先我们获取输入框的内容

（2）添加事件，当点击提交时，会新建一个表格的tr，然后新建三个td,然候将文本追加至td内部

（3）获取tbody的id，并利用appendChild方法将新建的tr添加进去

（4）获取table的id，并利用appendChild方法将新建的tbody添加进去

》》源码实现

<body>
    <center>
        <br>
        <br>
        添加用户:
        <br>
        <br>
        姓名:
        <input type="text" name="name" id="name" />
        &nbsp;&nbsp; email:
        <input type="text" name="email" id="email" />
        &nbsp;&nbsp; 电话:
        <input type="text" name="tel" id="tel" />
        <br>
        <br>
        <button id="addUser">提交</button>
        <br>
        <br>
        <hr>
        <br>
        <br>
        <table id="usertable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
                <tr>
                    <th>姓名</th>
                    <th>email</th>
                    <th>电话</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>[email protected]</td>
                    <td>5000</td>
                    <td>
                        <a href="deleteEmp?id=Tom">Delete</a>
                    </td>
                </tr>
                <tr>
                    <td>Jerry</td>
                    <td>[email protected]</td>
                    <td>8000</td>
                    <td>
                        <a href="deleteEmp?id=Jerry">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </center>
</body>

<script language="JavaScript">
    window.onload = function() {
        document.getElementById("addUser").onclick = function() {
            //1、首先获取文本框内的值
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var tel = document.getElementById("tel").value;
            //2、添加到表格中
                //1>新建td标签
            var nameTd = document.createElement("td");
                //2>创建上文本节点，并设置相应的值
            var nameTdText = document.createTextNode(name);
                //3>将文本节点加入td中
            nameTd.appendChild(nameTdText);

            var emailTd = document.createElement("td");
            var emailTdText = document.createTextNode(email);
            emailTd.appendChild(emailTdText);

            var telTd = document.createElement("td");
            var telTdText = document.createTextNode(tel);
            telTd.appendChild(telTdText);
            //新建a标签
            var aElement = document.createElement("a");
            //设置属性
            aElement.setAttribute("href", "deleteEmp?id=" + name);
            // 创建上文本节点，并设置相应的值
            var aText = document.createTextNode("Delete");
            //将文本节点加入td中
            aElement.appendChild(aText);

            var aTd = document.createElement("td");
            aTd.appendChild(aElement);
            //将td添加至tr中
            var trElement = document.createElement("tr");
            trElement.appendChild(nameTd);
            trElement.appendChild(emailTd);
            trElement.appendChild(telTd);
            trElement.appendChild(aTd);
            //获取tbody的值
            var tbElement = document.createElement("tbody");
            //将tr添加至tbody
            tbElement.appendChild(trElement);
            //将tbody添加至table
            var tableElement = document.getElementById("usertable");
            tableElement.appendChild(tbElement);
            //删除事件
            aElement.onclick = function() {
                return delTr(aElement);
            }
        }
    }

    function delTr(aElement) {
        var name = aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;

        var flag = window.confirm("您真的要删除[" + name + "]这个用户吗?");

        if (!flag) {
            //网页链接失效
            return false;
        }
        var trElement = aElement.parentNode.parentNode;

        var tbodyElement = aElement.parentNode.parentNode.parentNode;

        tbodyElement.removeChild(trElement);

        return false;
    }
</script>
当然正式开发我们肯定会将js事件单独存放

（8）实际应用案例2

》》实际效果

可以单选、可以多选、可以全选/全不选、可以反向选择

这里写图片描述

》》分析原理

在前台页面可能会用到这种小组件，这是js原生态写出来的小组件，不牵扯数据库，不牵扯高大上的插件库，纯手写，可以研究一下

首先来先看一段源码

您的爱好很广泛!!!

全选/全不选

足球

篮球

游泳

唱歌

    全选---------------------------------
    //为id为checkall的按钮注册点击事件
    document.getElementById("checkall").onclick = function() {
        //获取所有name为items的对象，这里的items是一个数组
        var items = document.getElementsByName("items");
        //for循环遍历出每一个item
        for (var int = 0; int < items.length; int++) {
            //循环一个，将其赋值其他变量
            var item = items[int];
        //默认情况下，单选框是不被选中的，我们想要做到全选，就必须将所有的checked属性设置为checked
            //这里还牵扯一个浏览器支持的问题
            //方法一，且ie和火狐、谷歌都支持
            //item.setAttribute("checked","checked");
            //方法二全浏览器支持
            item.checked = "checked";
        }
    }
    //全不选，步骤与上面相同，只是属性值设置不同
    document.getElementById("checkallNo").onclick = function() {
        var items = document.getElementsByName("items");
        for (var int = 0; int < items.length; int++) {
            var item = items[int];
            //全浏览器支持
            item.checked = null;
        }
    }
    //反选，步骤与全选相同，只是这里我们需要做个判断，判断该单选框是否被选中
    //其实在js中true和false判断使用次数使用频率较高，在这里当被选中，值为true,这种都是通过积累，后期可以慢慢探索这些隐藏的属性
    document.getElementById("check_revsern").onclick = function() {
        var items = document.getElementsByName("items");
        for (var int = 0; int < items.length; int++) {
            var item = items[int];
            if (item.checked) {
                item.checked = null;
            } else {
                item.checked = "checked";
            }
        }
    }
    //全选或全不选
    document.getElementById("checkItems").onclick = function() {
        var items = document.getElementsByName("items");
        if (this.checked) {
            for (var int = 0; int < items.length; int++) {
                var item = items[int];
                item.checked = "checked";
            }
        }else{
            for (var int = 0; int < items.length; int++) {
                var item = items[int];
                item.checked = null;
            }
        }

    }

“`