javascript代码实例教程-js中的Node属性和方法

发布时间:2019-01-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js中的Node属性和方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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节点的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来添加的事件处理函数那么就不会被复制,所以如果不需要事件处理函数那就清掉)

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-js中的Node属性和方法全部内容,希望文章能够帮你解决javascript代码实例教程-js中的Node属性和方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。