黑马程序员技术交流社区

标题: js中的节点操作 [打印本页]

作者: ExileSilent 时间: 2018-8-19 22:12
标题: js中的节点操作
节点

1.每个节点都有的个属性

（1）nodeType

用法：节点.nodeType

作用：用于表明节点类型。节点类型由在Node 类型中定义的下列

12 个数值常量来表示，任何节点类型必居其一，返回值是节点后面的代号（比如如果是文本节点，返回1）

元素节点          　　Node.ELEMENT_NODE(1)
属性节点          　　Node.ATTRIBUTE_NODE(2)
文本节点          　　Node.TEXT_NODE(3)
CDATA节点          Node.CDATA_SECTION_NODE(4)
实体引用名称节点　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点       　　Node.ENTITY_NODE(6)
处理指令节点       　　Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点          　 Node.COMMENT_NODE(8)
文档节点          　 Node.DOCUMENT_NODE(9)
文档类型节点       　　Node.DOCUMENT_TYPE_NODE(10)
文档片段节点       　　Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点          Node.NOTATION_NODE(12)

其中常用有几个，元素节点，属性节点，文本节点，文档节点,
要了解节点的具体信息，可以使用nodeName 和nodeValue 这两个属性，可以更好的查看节点信息

*对于元素节点，nodeName 中保存的始终都是元素的标签名，而nodeValue 的值则始终为null。

（2）：childNodes：其中保存着一个NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点

作用：保存着父节点的所有子节点，是一个集合，可以通过方括号，也可以使用item(下标)方法来获得所有保存在childNodes中的子节点

用法：父节点.childNodes

*也有length属性

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

（3）：parentNode：

作用：该属性指向文档树中的父节点；

用法：子节点.parentNode

通过使用列表中每个节点的previousSibling
和nextSibling 属性，可以访问同一列表中的其他节点。列表中第一个节点的previousSibling 属性
值为null，而列表中最后一个节点的nextSibling 属性的值同样也为null

父节点的firstChild 和lastChild属性分别指向其childNodes 列表中的第一个和最后一个节点

（4）ownerDocument，

作用：该属性指向表示整个文档的文档节点。

这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个
属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

2.操作节点的方法

首先要创建一个节点出来，用createElement方法

  var oli=document.createElement('li');

（1）appendChild()；

作用：在父节点下追加一个子节点节点作为父节点最后的子节点

用法：父节点.appenChild();

（2）insetBefore()

作用：节点放在childNodes 列表中某个特定的位置上

用法：父节点.insertBefore(参数1,参数2）

第一个参数：要插入的节点、

第二个参数：被插入的节点

新节点会被插入在被插入节点的前面

（3）replaceChild()

作用：替换节点

用法：父节点.replaceChild(参数1,参数2)

第一个参数：要插入的节点

第二个参数：被替换的节点

（4）：removeChild()

作用；移除节点

用法：父节点,removeChild(参数1);

参数1就是被删除的节点

总结：前面介绍的四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节
点（使用parentNode 属性）。另外，并不是所有类型的节点都有子节点，如果在不支持子节点的节点
上调用了这些方法，将会导致错误发生。

重要：灵活应用这些方法及属性，需要理解js的DOM，这写会让我们的水平更上一层

作者: 398580721 时间: 2018-8-24 20:26
棒棒哒~

作者: 娟呀 时间: 2018-8-24 22:08
厉害哦,棒棒哒~

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2