js Dom节点树

js Dom节点树

1、节点类型（nodeType）

document.getElementById(‘id’).nodeType
可以通过节点元素的nodeType属性得到节点类型
element 1 元素节点
text 3 文本节点（空白行也是文本节点）
comment 8 注释节点
HTMLdocument 9 document.nodeType=9

<div>
        文本节点
        <p id='paragraph'>我是个段落啊</p>
        <ul>
            <!--list列表-->
            <li class="list">11111111111</li>
            <li class="list">22222222222</li>
        </ul>
    </div>

问：div有几个子节点？分别是什么？类型几何？
document.getElementsByTagName(‘div’)[0].childNodes 获取div的所有子节点

其中

    </ul>
</div> 

中间的换行默认为一个textNode节点类似于

    </ul>这里有文字
</div> 

2、节点关系

parentNode 父节点
childNodes 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
prevSibling 前一个兄弟节点
nextSibling 下一个兄弟节点

3、元素节点、元素节点关系

element类型的节点 nodeType=1
parentElement 兄弟元素节点
children 所有的子元素节点
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
prevElementSibling 前一个兄弟元素节点
nextElementSibling 下一个兄弟元素节点

4、查：js获取元素节点常用方法

getElementById 通过元素的id属性获取（id是唯一的）返回选中的element节点
getElementByClass 通过元素的class属性获取，class可以相同，返回的是所有满足条件class的element数组
getElementByTagName 通过元素的nodeName获取元素，返回该名字的所有element数组
querySelector 获取满足条件的第一个元素节点（后期使用js创建和修改过的节点变化无法获取到）
querySelectorAll 获取所有满足条件的元素节点（后期使用js节点创建和修改过的节点变化无法获取到）

5、增：创建元素节点1212

createElement 新建一个元素标签
createTextNode 新建一个文本标签（可以插入到元素标签中）

6、插：插入节点

parentNode.append 在父节点末尾插入元素节点（剪切操作–如果append的元素是页面中的元素时）
parentNode.appendChild 在父节点末尾插入节点
parentNode.insertBefore(element,childNode) 将element插入到parentNodede的childNode前面（childNode.prevElementSibling=element）

7、删：删除元素节点

parentNode.removeChild 父元素删除某个子元素
child.remove 元素删除自己