js中的Node属性和方法

来源:互联网 发布:qq飞车数据异常 编辑:程序博客网 时间:2024/06/06 02:16

js中所有节点都实现了Node接口

1.node.nodeType:

这个方法能够获取节点类型常见的有下面几种:

node.nodeType==1:元素节点,如body,ul...

node.nodeType==2:属性节点,如name,type...

node.nodeType==3:文本节点,就是一段文本(空格也算文本)

node.nodeType==9:document类型,就是document

e.g:获取一个元素btn, btn.nodeType就等于1,属性节点需要使用btn.getAttributeNode("属性")


2.node.nodeName:

元素节点返回元素的标签名(都是大写的)

文本节点返回#text

document类型返回#document

属性节点返回属性名


3.node.childNodes()返回包含所有的子节点的nodelist,这个nodelist和数组很像,但不是,而且这个nodelist是实时更新的,只要你改变页面的元素,那么就会立即反应在里面所以下面的使用会出现死循环

for(var i = 0 ; i < node.childNodes.length ; i++){

node.appendChild(document.createElement("li"));

}

只能将node.childNodes.length先存下来再进行运算才行


4.node.parentNode()返回节点的父节点


5.node.previousSibling()返回节点的前一个同级节点

(注:如果两个元素不紧挨着那么后一个元素节点的前一个节点就是文本节点,如下)

<button></button>

<button></button>

后一个button节点的previousSibling就是文本节点,因为中间有空格


6.node.nextSibling()返回当前结点的同级后一个节点,注意点和上面一个一样


7.node.hasChlidNodes()判断有无子元素,同样的如果标签中间有空格那就是有文本子节点,有就返回true


//从这儿开始所有的parentNode都代指父节点

节点操作:

1.parentNode.appendChild(newNode)

这个方法在子节点的最后添加一个节点

(注:如果添加的newNode是在parentNode下的,只要是同一parentNode下的 '后代' 元素那么就是将这个元素转移到parentNode下的子元素的最后)


2.parentNode.insertBefore(newNode,referenceChildNode)

这个方法是在某个字元素的前面添加元素

referenceChildNode就是要被插入到前面的元素

如果是在最后插入元素那就将referenceChildNode填为null


3.parentNode.replaceChild(newNode,needReplacedNode)

替换某个子节点,如果是想要删除某个元素也可以使用这个方法实现类似的功能,只要newNode是一个空文本节点就可以了,不可一是null


4.parentNode.removeChild(needRemovedNode)

删除某个子节点


5.node.cloneNode()

复制某个元素,如果传入参数true就是连同子元素一起复制

(注:如果元素中有直接写在元素上的事件处理函数那么也会一起复制的,如果是使用js来添加的事件处理函数那么就不会被复制,所以如果不需要事件处理函数那就清掉)









原创粉丝点击