这是我参与「第四届青训营」笔记创作活动的的第13天

DOM

接上篇，上篇包括DOM的获取元素、事件基础和操作元素

节点操作

节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素结点 nodeType为1
属性结点 nodeType为2
文本结点 nodeType为3（文本结点包括文字、空格、换行等）

在实际开发中，节点操作主要操作的是元素结点

节点层次

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父结点

元素.parentNode 得到的是离元素最近的父级结点（亲爸爸），如果找不到就返回为null

<div class="sd">
        <div class="box">
            <span class="re">X</span>
        </div>
    </div>
    
    <script>
        var re = document.querySelector('.re');
        console.log(re.parentNode);
    </script>

子节点

元素.childNodes得到的所有的子节点包含元素结点、文本结点等

<ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
 </ul>
    
    <script>
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);
    </script>

parentNode.children是一个只读属性，返回所有的子元素结点

console.log(ul.children);

parentNode.firstchild返回第一个子节点，找不到则返回null。同样包含所有结点。
parentNode.lastchild返回最后一个子节点，找不到则返回null。同样包含所有结点。
parentNode.firstElementChild返回第一个子元素节点，找不到则返回null。
parentNode.lastElementChild返回最后一个子元素节点，找不到则返回null。

        console.log(ul.firstChild);
        console.log(ul.lastChild);
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);

parentNode.firstElementChild和parentNode.lastElementChild有兼容问题，实际开发常用parentNode.children[0]和parentNode.children[parentNode.children.length -1]

兄弟节点

node.nextSibling下一个兄弟节点，包括元素节点或者文本节点等
node.previousSibling上一个兄弟节点，包括元素节点或者文本节点等
node.nextElementSibling下一个兄弟元素节点
node.previousElementSibling上一个兄弟元素节点

<div>我是div</div>
    <span>我是span</span>
    <script>
        
        var div = document.querySelector('div');
        var span=document.querySelector('span');
        console.log(div.nextSibling);
        console.log(span.previousSibling);
        console.log(div.nextElementSibling);
        console.log(span.previousElementSibling);
    </script>

创建和添加节点

创建节点document.createElement('tagName')
添加节点node.appendChild(child)将一个节点添加到指定父节点的子节点末尾
node.insertBefore(child,指定元素)将一个节点添加到父节点的指定子节点前面

删除结点

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

复制结点

node.cloneNode()参数为空或false时只复制标签不复制内容；参数为true为深拷贝，即复制标签和里面的内容

DOM重点核心

对于dom操作，主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作

创建

document.write()
element.innerHTML
document.createElement()

三种创建元素方式区别

document.write()是直接将内容写入页面的内容流，但是文档执行完毕，则它会导致页面全部重绘。 element.innerHTML创建多个元素效率更高，不要拼接字符串，采取数组形式拼接， document.createElement()创建多个元素效率稍低一点点，但结构更清晰

增

appendChild
insertBefore

删

removeChild

改

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

查

dom提供的API方法：getElementById、getElementsByTagName
H5提供的新方法：querySelector、querySelectorAll
利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）

属性操作

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute：移除属性

DOM与BOM（二）|青训营笔记

DOM