节点操作

为什么要学？
因为获取元素的方式：1.利用DOM提供的方法来获取元素例如document.getElementById（）等，缺点是逻辑性不强，繁琐 2. 利用节点层级关系获取元素，指的是父子兄节点关系，逻辑性强
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），文档中的标签称作元素节点，还有属性节点，文本节点（包含文字，空格，换行等）
节点至少有nodeType(节点类型) ， nodeName(节点名称) nodeValue(节点值) 这三个基本属性
元素节点：nodeType为1
属性节点：nodeType为2
文本节点：nodeType为3
在实际开发中进行元素节点（标签）的操作

父节点 node.parentNode (使用较多)

得到的是离元素最近的一个父级节点，如果找不到父节点返回null

子节点 parentNode.childNodes 伪数组

得到的所有子节点，包含元素节点，文本节点等等

子节点 parentNode.children(使用较多) 伪数组

返回所有的子元素节点

第一个子节点 parentNode.firstChild 最后一个子节点 parentNode.lastChild

他们都返回的字节点，不一定是子元素节点，

parentNode.children[0] 返回第一个子元素节点，parentNode.children[parentNode.children.length-1] 返回最后一个子元素节点

下面是两个方法，获取第一个子元素节点和最后一个子元素节点，找不到返回null但仅仅是IE9以上才支持（有点印象就行）
第一个子元素节点 parentNode.firstElementChild 最后一个子元素节点 parentNode.lastElementChild

<body>
      <ul id="ul">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
      </ul>
      <div>
          <span id="child"></span>
      </div>
     <script>
         //1.获取span节点的父节点div
        var spa =  document.getElementById("child");
        console.log(spa.parentNode);
        //2.获取ul里面的所有的子节点li
        var ul =  document.getElementById("ul");
        console.log(ul.childNodes);
        //输出得到：NodeList(9)  [text, li, text, li, text, li, text, li, text]，是伪数组的形式
        // 就是第一个li前有一个换行，属于文本节点text,总共有5个换行，即5个text
        // 但实际开发中只需元素节点：可以使用nodeType(节点类型) 来判断是否是所需要的节点类型
        // 元素节点：nodeType为1  属性节点：nodeType为2  文本节点：nodeType为3
        // for(var i=0;i<ul.childNodes.length;i++){
        //     if(ul.childNodes[i]==1){
        //         console.log(ul.childNodes[i]);
        //     }
        // }
        // 以上太麻烦，会用第二种方式 获取所有子元素节点 parentNode.children(使用较多)
        console.log(ul.children);
        //HTMLCollection(4) [li, li, li, li]，

        //3.获取第一个和最后一个li
        console.log(ul.firstChild);//#text
        //因为返回第一个子节点，第一个是换行，文本节点text
        console.log(ul.lastChild);//#text
        //因为返回最后一个子节点，是一个换行，文本节点text

        //返回第一个子元素节点，
        console.log(ul.children[0]);//<li>1</li>
        //返回最后一个子元素节点，
        console.log(ul.children[ul.children.length-1]);// <li>4</li>


        //IE9以上才支持
        console.log(ul.firstElementChild);//<li>1</li>
        console.log(ul.lastElementChild);// <li>4</li>
     </script>
</body>

下拉菜单的思路：

在HTML中摆放盒子：
在一个ul里面的li就是各个导航栏的选项卡，在每一个li中有两个孩子，第一个a,第二个是ul,ul里面的各个li就是所有下拉选项
当鼠标经过时，所有下拉选项才会显示，一开始先给下拉选项：display:none

<body>
    <ul id="nav">
        <li>
            <a href="">选项卡1</a>
            <li>下拉1</li>
            <li>下拉2</li>
        </li>
        <li>
            <a href="">选项卡2</a>
            <li>下拉1</li>
            <li>下拉2</li>
        </li>
    </ul>      
     <script>
          //1.获取元素：整个大盒子nav ,所有的选项卡,就是所有的li 
          var nav = document.getElementById("nav");
          var lis = nav.children;//所有子元素节点，伪数组
          //2.循环注册事件：当鼠标经过各个选项卡 lis[i]时，所有下拉选项才会显示
          for(var i=0;i<lis.length;i++){
            // 所有下拉选项是当前小li的第二个子元素节点this.childern[1]
              lis[i].onmouseover = function(){
                  this.childern[1].style.display = "block";
              }
              //当鼠标离开时，所有下拉选项就会隐藏
              lis[i].onmouseout = function(){
                  this.childern[1].style.display = "none";
              }

          }
     </script>
</body>

兄弟节点（一般不用）

1. node.nextSibling 得到 node的下一个兄弟节点，包含包含所有的节点

2. node.previousSibling 得到 node的上一个兄弟节点，包含包含所有的节点

一般兄弟节点用的较少，前面的父节点 node.parentNode 和子节点 parentNode.children才是最香的

<body>
     <div id="div">div</div>
     <span id="span">span</span>
     <script>
         //1.
          var div = document.getElementById("div");
          console.log(div.nextSibling);//#text
          //因为div后面首先是一个换行，就是文本节点
          var span = document.getElementById('span');
          console.log(span.previousSibling);//#text
          //因为span前面的首先是一个换行，就是文本节点

         //2.IE9以上才支持
         console.log(div.nextElementSibling);//<span id="span">span</span>
         console.log(span.previousElementSibling);//<div id="div">div</div>
     </script>
</body>

创建和添加节点

1.创建节点： document.creatElement('tagname') 方法，由标签名指定的HTML元素，因为这些元素原先不存在，又称动态创建元素节点
2.添加节点：
（1）node.appendChild(child) 方法，其中的node是父节点，child是要添加的字节点，实现将一个节点添加到指定父节点的子节点列表的末尾
（2）node.insertBefore(child,指定元素) 方法实现将一个节点添加到父节点的指定子节点的前面

<body>
    <ul>
        <li>123</li>
    </ul>
    <!-- 想在ul里面的li后面添加一个新的li -->
    <script>
        //1.创建元素节点
        var li = document.createElement('li');
        //2.添加节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);//此处的小括号不加引号哦
        //3.想在ul里面的原来li前面添加一个新的li
        //ul里面的原来li指定就是ul.children[0]
        var lili = document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);
    </script>
</body>

简单版发布留言案例

网页结构：用户在文本域中输入文字，点击右侧的发布按钮，就会在下方的ul里面添加一个新的li
在创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
如果想使最新发布的留言显示在最前面就要使用insertBefore()方法实现

<body>
    <!-- 一.HTML布局：
    文本域和普通按钮上的文字显示的实现 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        //1.获取元素 点击按钮，创建li,给li的内容赋予文本域的值，最后将li添加到ul中
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.注册事件
        btn.onclick = function(){
            // (1)首先在用户点击发布按钮时，判断用户有没有输入文字呀？文本域的内容用到value属性
            if(text.value == ""){
                alert('你没有输入内容');
                return false;
            }
            else{
                //(1)创建元素
                var li  = document.createElement('li');
                //有了li后才可以给li赋值
                li.innerHTML = text.value;
                //(2) 添加元素
                ul.insertBefore(li,ul.children[0]);
            }
        }
    </script>
</body>

删除节点

node.removeChild(child) 其中的node是父节点，child是要添加的子节点，
此方法实现从DOM中删除一个子节点，返回删除的节点

<body>
     <button>删除</button>
  <ul>
      <li>熊大</li>
      <li>熊二</li>
      <li>熊二铁憨憨</li>
  </ul> 
  <!-- 需求：当点击按钮时，可以依次删除li ，同时删除完后，按钮不可以再点击  -->
  <script>
      //1.获取元素    点击按钮，删除ul里面的孩子
      var ul = document.querySelector('ul');
      var btn = document.querySelector('button');
      //2.点击按钮，依次删除里面的孩子，（1）那就要判断何时删完了？
      //删完了，就是ul没有孩子了，ul.children 获取的子节点组成的伪数组的长度是0，
      //即ul.children.length=0,就是删完了呀！
      //（2）删完了要使得按钮不允许再次点击，就是this.disabled = true;
      btn.onclick = function(){
          if(ul.children.length==0){
            this.disabled = true;
          }
          else{
              //每次删除都是删除ul的第一个子节点ul.children[0]
              ul.removeChild(ul.children[0]);
          }
      }     
  </script>

删除留言案例

当我们把文本域里面的值赋值给li的时候，要多添加一个删除的链接
需要将所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
阻止链接跳转的方法：href = 'javascript: ;' 此处是冒号后面加分号哟

<body>
    <!-- 一.HTML布局：
    文本域和普通按钮上的文字显示的实现 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        //1.获取元素 点击按钮，创建li,给li的内容赋予文本域的值，最后将li添加到ul中
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.注册事件
        btn.onclick = function(){
            // (1)首先在用户点击发布按钮时，判断用户有没有输入文字呀？文本域的内容用到value属性
            if(text.value == ""){
                alert('你没有输入内容');
                return false;
            }
            else{
                //(1)创建元素
                var li  = document.createElement('li');
                //有了li后才可以给li赋值   //在每个li上添加了超链接a
                li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";//此处是外双内单
                //(2) 添加元素
                ul.insertBefore(li,ul.children[0]);
                //(3) 删除元素   当我们点击当前的链接的时候，删除当前链接所在的li
                var as = document.querySelectorAll('a');
                for(var i=0;i<as.length;i++){
                    as[i].onclick = function(){
                        // 删除的是当前链接的li  就是当前链接的父亲
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

复制节点（克隆节点）node.cloneNode()

方法返回的是调用该方法的节点的一个副本

若括号的参数是空或者false，称作浅拷贝，就只克隆节点本身，不克隆里面的子节点
若括号里面是true,称作深拷贝，会克隆节点本身，也会克隆里面的子节点

<body>
     <ul>
         <li>123</li>
         <li>456</li>
         <li>789</li>
     </ul>
     <!-- 复制ul里面的第二个li,并且添加到第一个li 的前面 -->
     <script>
         //1. 获取元素ul
         var ul = document.querySelector('ul');
         //2.克隆ul的第二个孩子
         var lis = ul.children[1].cloneNode(true);
         ul.insertBefore(lis,ul.children[0]);
     </script>
</body>

动态生成表格

表格是根据动态的数据而发生动态的变化

因为里面的学生数据都是动态的，需要js动态生成；一般数据存在数据库中，现在我们先模拟数据，自己定义好数据，数据采取对象的形式存储，将各个对象放到数组中
所有数据都放到tbody的行中，行要循环创建，行数就是对象数组的元素（对象）的个数，就是数组的长度
创建每行里面的单元格，就是对应着每个对象的属性个数 for循环遍历每个对象 for in 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,th{
            border:1px solid #333;
        }
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <!-- 表格分为thead 和 tbody 上下两部分，表头是固定的，数据依次往里面生成到tbody  -->
    <table>
        <thead cellspacing='0'>
<tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
    <th>操作</th>
</tr>
        </thead>
        <tbody>

        </tbody>

        <script>
            // 先写表格的前三列，最后一列是js独有的删除操作，最后写
        //  1.准备数据：数据采取对象的形式存储；同时将所有的学生对象都放到数组中
var datas = [{
    name:'xiaohong',
    subject:'java',
    score:20
},{
    name:'xiaotong',
    subject:'java',
    score:30
},{
    name:'xiaozizi',
    subject:'javascript',
    score:40
},{
    name:'xianzi',
    subject:'web',
    score:100
}];
// 2.创建行 ：行数就是对象数组的长度
var tbody = document.querySelector('tbody');//先获取tbody
// （1） 循环创建行
for(var i=0;i<datas.length;i++){
    //创建行
    var tr = document.createElement('tr');
    //tr添加到tbody中
    tbody.appendChild(tr);
    // （2）.创建每行里面的单元格  对应着每个对象的属性个数
    //for循环遍历每个对象datas[i]    用到for in 循环,对象有几个属性，下面的for循环就执行几次
    for(var k in datas[i]){
        //创建单元格td 
        var td= document.createElement('td');
        //td添加到tr中
        tr.appendChild(td);
        // （3）单元格填充数据 把对象里面的属性值给td
        // 对于for(var k in obj)的循环，k 得到的是属性名， obj[k]得到属性值
        // 对于此，datas[i][k] 就是属性值
        td.innerHTML = datas[i][k];
    }
// 3.创建有删除这两个字的单元格
var td = document.createElement('td');
//使”删除“ 以超链接的形式出现
td.innerHTML = '<a href = "javascript:;">删除</a>';
tr.appendChild(td);
}

//4.添加删除操作
// 先获取所有的超链接a, 
var as = document.querySelectorAll('a');
//循环给每个a,注册点击事件，当点击时，会删除a所在的那一行，a的爸爸是td,就是爸爸的爸爸才是tr， a.parentNode.parentNode
for(var i=0;i<as.length;i++){
    as[i].onclick = function(){
        // tr的爸爸是tbody 
        tbody.removeChild(this.parentNode.parentNode);
    }
}
        </script>


    </table>
</body>
</html>

三种动态创建元素的方式及区别：(了解)

1. document.write()

是直接将内容写入到页面的内容流，正常来创建元素没有问题，但是特点就是：文档流执行完毕，则会导致页面全部重绘（对于注册事件的，触发事件前，文档流就已经执行完毕）

<body>
    <button>点击</button>  
     <p>abc</p>
     <!-- 想在写一个div标签 -->
     <script>
         //1. document.write() 
         var btn = document.querySelector('button');
         btn.onclick = function(){
            document.write('<div>123</div>');
         }
         //结果就是：当我们点击按钮时，页面中原来的btton和p标签的内容都没有了，只有123
     </script>
</body>

2. element.innerHTML

是将内容写入某个DOM节点，不会导致页面重绘

3. document.creatElement()

body>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        //在div中创建a标签
        //  1. element.innerHTML  方法
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href="#">百度</a>';

        //  2.document.creatElement() 方法
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
    </script>
</body>

innerHTML创建多个元素效率更高，（不要拼接字符串，而是采取数组形式拼接），结构稍复杂；
creatElement() 创建多个元素的效率稍低一些，但结构清晰
总结：
在不同的浏览器下，innerHTML效率比creatElement() 高

DOM重点核心

我们获取过来的DOM元素是一个对象，所以DOM又称作文档对象模型；
对于HTML，DOM使得HTML形成一棵dom树，包含文档，元素，节点
对于dom操作，主要是对于元素的操作，主要有创建，增，删，改，查，属性操作，事件操作

创建

document.write()
element.innerHTML
document.creatElement()

增

appenChild
insertBefore

删

removeChild

改

主要是修改DOM的元素属性，DOM元素的内容，属性，表单的值等

修改元素属性：src , href , title等
修改普通元素内容：innerHTML , innerText
修改表单元素：value , type , disabled
修改元素的样式： style , className

查

就是获取查询dom的元素

DOM提供的API元素：getElementByld , getElementsByTagName等
H5提供的方法：querySelector querySelectorAll 提倡
利用节点操作获取元素：父（parentNode），子（children），兄（previousElementSibling, nextElementSibling）提倡

属性操作

主要是对于自定义属性

setAttibute: 设置DOM的属性值
getAttribute: 得到DOM的属性值
removeAttribute: 移除属性

事件操作

给元素注册事件：
采取：事件源.事件类型 = 事件处理程序事件三要素做的

posted on 2021-12-04 22:16 精致猪猪侠阅读(105) 评论(0) 收藏举报

刷新页面返回顶部