解析js中的DOM 节点数（下）

指挥官乄
114 阅读1分钟

解析js中的DOM 节点数（下）

一、操作DOM节点

DOM树.png

  • 目的：获取元素，通过节点的层次关系（主要是父、子、兄操作），开发中节点操作主要是操作元素节点
  • 一般，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）三个基本属性

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3（包含文字、空格、换行等）

  1. 获取父级节点操作 类名.parentNode; 获取的是离元素最近的父级节点（亲爸爸），如果找不到父级节点就返回null

  2. 获取子节点的操作

        <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // childNodes获取有所子节点，包含元素节点 文本节点等
        console.log(ul.childNodes);
        // children 获取所有子元素节点，实际开发中经常使用，获取得到是li
        console.log(ul.children);
​
// 这两个方法有兼容性问题！IE9以及以上才支持
        // 获取第一个元素节点
        console.log(ul.firstElementChild);
        // 获取最后一个元素节点
        console.log(ul.lastElementChild);
​
// 开发中使用，获取单个子元素节点，没有兼容性问题
        console.log(ul.children[0]);
        console.log(ul.children[1]);    
​
    </script>

    1. 获取兄弟节点操作

        <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
​
// 返回下一个兄弟节点，包含元素节点、文本节点
        console.log(div.nextSibling);
        console.log(div.previousSibling);
//推荐使用，获取的是下一个兄弟节点，找不到返回null，这两个方法有兼容性问题
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
// 如何解决兼容性问题，自己封装函数
            console.log(getNextElementSibling(div));
​
        function getNextElementSibling(element) {
            var el = element;
            while(el = el.nextSibling) {
                if(el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }
    </script>

  • 创建节点

  1. 语法：document.createElement('tagName'); tagName 指定HTML元素，因为元素原先不存在，是根据我们的需求动态生成的
  2. 添加节点： node.appendChild() ; 将一个节点添加到指定夫界定啊的子节点末尾
<body>
    <ul>
        <li></li>
        <li>123</li>
    </ul>
</body>
<script>
    var ul =  document.querySelector('ul');
    var li =  document.createElement('li');
    // 在子节点末尾插入
    ul.appendChild(li);
​
    var lili =  document.createElement('li');
​
    // 在子节点前面插入
    ul.insertBefore(lili,ul.children[1]);
</script>

留言板案例

<style>
    input {
        width: 200px;
        height: 50px;
    }
    li {
        width: 400px;
        background-color: pink;
    }
    li a {
        float: right;
    }
</style>
<body>
    <input type="text">
    <button>发布</button>
    <ul>
    </ul>
</body>
<script>
    // 获取input输入的内容
    var input = document.querySelector('input');
    var btn = document.querySelector('button');
    var a  = document.querySelector('a');
​
    btn.onclick = function() {
        // 点击案例，创建li，向li中添加input输入框的内容 input.value
        var ul = document.querySelector('ul');
        var li = document.createElement('li');
        // 赋值，插入
        li.innerHTML=input.value + "<a href='javascript:;'>删除</a>";
        ul.appendChild(li);
​
        // 删除元素
        var as = document.querySelectorAll('a');
        for (let index = 0; index < as.length; index++) {
            as[index].onclick = function() {
                // node.removeChild(child);删除的是当前a所有的li this.parentNode;
                ul.removeChild(this.parentNode);
            }            
        }
    }
</script>

  • 删除节点

语法： node.removeChild(child); 从DOM中删除父节点中的一个子节点，返回删除的节点

  • 赋值节点

语法;node.cloneNode(); 返回调用该方法的节点的一个副本，拷贝/克隆

1 浅拷贝，只复制标签，不复制内容

2 浅拷贝，只复制标签，不复制内容

<body>
 <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
 </ul>
</body>
<script>
 var ul = document.querySelector('ul');
 //  浅拷贝，只复制标签，不复制内容
 var lili1 = ul.children[0].cloneNode();
 //  浅拷贝，只复制标签，不复制内容
 var lili2 = ul.children[0].cloneNode(true);
 ul.appendChild(lili1);
 ul.appendChild(lili2);
</script>

二、创建元素

  • 三种动态创建元素

  1. doucment.write() ; 冷门,不推荐
  2. document.innerHTML();
  3. doucment.createElement();

区别:

1. doucment.write()  直接写入内容，但是文档流执行完毕则会导致页面全部重绘
2. document.innerHTML(); 创建大量元素，通过拼接字符串的方式耗时耗内存
3. doucment.createElement(); 效率高

\

avatar
文章
阅读
粉丝