js获取节点的DOM操作

Posted 2020-08-09

一直感觉DOM节点什么的乱七八糟的不能理解，可能博客也没办法写清楚，只能把知道的一些信息大致写下来慢慢再补充了。

 

html DOM类型

Node类型

javascript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

除IE外其他浏览器都可以访问到这个类型。

每个节点都有一个NodeType属性，用于表明节点的类型，节点类型由在Node类型中定义的下列12个常数值来表示，任何节点类型必居其一。

根据这些常量值可以很容易的判断节点类型。

if(someNode.nodeType == Node.ELEMENT_NODE){//IE无效
     alert("Node is an element!");   
}

if(someNode.nodeType == 1){ //所有浏览器有效
     alert("Node is an element!");   
}

 

1. Node.ELEMENT_NODE(1);   元素节点
2. NOde.ATTRIBUTE_NODE(2);    节点属性
3. Node.TEXT_NODE(3);    文本节点
4. Node.CDATA_SECTION_NODE(4);   CDATA区域中的内容
5. Node.ENTITY_REFERENCE_NODE(5);
6. Node.ENTITY_NODE(6);
7. Node.PROCESSING_INSTRUCTION_NODE(7);
8. Node.COMMENT_NODE(8);    注释的文本节点
9. Node.DOCUMENT_NODE(9);    document节点
10. Node.DOCUMENT_TYPE_NODE(10);
11. Node.DOCUMENT_FRAGMENT_NODE(11);    document片段
12. Node.NOTATION_NODE(12);

 

JS操作DOM节点操作：

添加节点：

appendChild():通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。

复制节点：

cloneNode():复制当前节点，或者复制当前节点以及它的所有子孙节点。

判断是否拥有该节点：

hasChildNodes()：如果当前节点拥有子节点，则将返回true。

插入节点：

insertBefore()：给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。

删除节点：

removeChild()：从文档树中删除并返回指定的子节点。

替换节点：

replaceChild()：从文档树中删除并返回指定的子节点，用另一个节点替换它。

 

DOCUMENT类型：

查找节点：

getElementById()

getElementByTagName()

getElementByClassName()