DOM节点的 增删改查

DOM选择器

document.getElementById();//ie8以及以下版本没有
document.getElementsByTagName();//ie4以及以下版本没有
document.getElementsByClassName();//ie8以及以下版本没有
document.getElementsByName();//部分有name属性的标签有用
document.querySelector();//ie7以及以下版本没有
document.querySelectorAll();//ie7以及以下版本没有
document.body;//获取body标签
document.documentElement;//获取HTML标签;

DOM结构树

dom结构树

元素节点

节点类型

元素节点，文本节点，属性节点

父级节点 parentNode/parentElement

parentNode更常用哦

<div>
    <div class="son"></div>
</div>
<script>
    var son = document.getElementsByClassName("son");
    var father = son[0].parentNode;//通过子节点获取父节点
    var father1 = son[0].parentElement;//通过子节点获取父节点
    console.log(father);
    console.log(father1);
</script>

parentNode可以取代parentElement的所有功能

parentNode是W3C标准，parentElement后者是ie标准，所以不建议使用parentElement

子节点 childNodes / children

children更常用哦

<div class="father">
    <div class="son">1</div>
    <div class="son">2</div>
    <div class="son">3</div>
</div>
<script>
    var father = document.getElementsByClassName('father');
    
    console.log(father.firstElementChild);//此元素的第一个子节点
    console.log(father.lastElementChild);//此元素的最后一个子节点
    console.log(father.firstChild);//此元素的第一个节点（包括文本）
    console.log(father.lastChild);//此元素的最后一个节点（包括文本）
    
    var son = father[0].childNodes;//获取father的所有子节点（元素节点，文本节点，属性节点）
    var son1 = father[0].children;//获取father的所有元素节点
    
    for (let i = 0; i < son.length; i++) {
        if (son[i].nodeType == 1) {  //判断是否为元素节点
            console.log(son[i]);     //获得元素节点
        }
    }
</script>

childNodes和children的区别：

childNodes获取的是全部类型的节点（包括注释、文本..），children是获取元素节点

兄弟节点

<div>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
</div>
<script>
    var node = document.querySelector("h3");

    console.log(node.nextElementSibling);//此元素的下一个元素节点
    console.log(node.previousElementSibling);//此元素的上一个元素节点

    console.log(node.nextSibling);//此元素的上一个节点（包括文本节点），ie678
    console.log(node.previousSibling);//此元素的上一个节点（包括文本节点）
</script>

动态操作元素节点

<div class="father">
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
</div>
<script>
    var father = document.querySelector(".father");
    var h4 = document.createElement('h4');//创建一个h4标签
    h4.innerHTML="4";
    father.appendChild(h4);//把h4动态添加到最后一个子节点
    father.insertBefore(h4,father.children[0]);//把会h4动态添加到子节点[0]的位置
    father.removeChild(h4);//移除h4节点
    var clone = father.cloneNode(true);//true表示赋值整个节点，false表示只复制空标签
    console.log(clone);
</script>

增加节点

插入节点

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

这意味着，一个节点不可能同时出现在文档的不同位置。所以，如果某个节点已经拥有父节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。

若要保留已在文档中的节点，可以先使用Node.cloneNode() 方法来为它创建一个副本，再将副本附加到目标父节点下。请注意，用 cloneNode 制作的副本不会自动保持同步。

如果给定的子节点是 DocumentFragment，那么 DocumentFragment的全部内容将转移到指定父节点的子节点列表中。

删除节点

替换节点

节点的4个属性

1. nodeName：元素标签名，大写形式表示，只可读

2. nodeValue：Text节点或Comment节点的文本内容，可读可写

3. nodeType：节点的类型

   值	类型
   1	元素节点
   2	属性节点
   3	文本节点
   8	注释节点
   9	document
   11	DocumentFragment

4. attribute：Element节点 的属性集合

三种动态创建元素区别

1、document.write();

直接将内容写入页面的内容流，文档流执行完毕会导致页面全部重绘（少用）

2、element.innerHTML;

创建多个元素效率更高（数组形式），但结构稍微复杂

3、document.createElement();

效率稍微较低，但是结构清晰

node.innerHTML;                     /*获取/改变node里面的HTML内容*/
node.innerText;                     /*获取/改变node里面的文本内容*/
node.textContent;                   /*和innerText一样，老版本不兼容*/
node.setAttribute('class','demo');  /*设置属性和值，可设置自定义属性*/
node.getAttribute('id');            /*获取属性值*/