JS DOM1核心概要1

Posted 2020-08-09

节点：XML和html文档都是有节点构成的结构，每段标记都可以通过节点来表示；

节点类型：

元素节点（常用）

属性节点（常用）

文本节点

注释节点

文档节点

进程节点

文档类型节点

等...

了解节点的信息可以用nodeValue和nodeName属性，这两个属性的取值完全有节点类型决定，文本节点的nodeValue为文本节点的文本内容，常用它来获取某一节点的值，

元素节点的nodeName为元素名称，nodeValue为空；

ex:

　　if(someNode.nodeType==1){

　　　　alert(someNode.nodeName);//弹出元素节点的元素值

　　}

家族式节点关系：

节点的childNodes属性，该属性内包含nodelist对象，用于保存一组有序的节点对象(子节点对象)，可以通过方括号语法来访问；nodelist可以通过length属性获取其节点长度;

在文档中childNodes的节点中常常包含空白元素节点，所以在用childNodes遍历子元素时通常需要判断其节点类型；

ex:

　　var firstnode=someNode.childNodes[0];

　　var len=someNode.childNodes.length;

节点的parentNode属性，该属性指向文档树中的父节点，包含在childNodes中的所有的节点都有一个共同的parentNode，childNodes节点之间是同胞关系，可以通过每个节点的previousSibling和nextSibling来访问同一列表中的其他节点，其中childNodes.firstChild代表第一个子节点，childNodes.lastChild代表最后一个子节点；

操作节点：

appendChild:向chileNodes的末尾添加一个节点。返回新增节点；

ex:

　　var returnNode=childNodes.appendChild(newNode);

　　alert(returnNode==newNode);//true

removeChild:移除某个节点，结果返回被移除的节点；

ex:

　　var someNodeFirstnode=childNodes.removeChild(someNode.firstChild);

insertBefore：向chileNodes某个元素之前添加子节点，需要两个参数（newNode,someNode);

relpaceChild：替换某个节点，需要两个参数（newNode,someNode），返回被替换后的节点；

cloneNode:复制某个节点，参数为true时表示深度复制;