浅谈js的html元素的父节点,子节点
parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持
示例:
"parentNode"常用来获取某个元素的父节点.把parentNodes理解为容器,在容器中有个子节点,如下:
<divid="parent"> <bid="child">Mytext</b> </div>
在上面的代码中,你看到把"爹"作为一个div容器,该容器中有个"孩子",就是粗体的文字部分.如果你打算用getElementById()方法获取粗体元素并且想知道它"爹"是谁,返回的信息将是一个div.演示下面的脚本如下:
<scripttype="text/javascript"> <!-- alert(document.getElementById"child").parentNode.nodeName); //--> </script>
用parentNode不一定只找到一个"爹","儿子"也可以成为"爹",如下面的例子...
<divid="parent"> <divid="childparent"> <bid="child">Mytext</b> </div> </div>
上面这段代码中有两个"爹"和两个"孩子".头一个div(id"parent")是第二个div(childparent)的"爹". 在"childparent"中有个粗体元素(id"child"),是"childparent"div的"孩子".那么,如何访问到"爷爷"(id"parent")?如下:
<scripttype="text/javascript"> <!-- alert(document.getElementById("child").parentNode.parentNode.nodeName); //--> </script>
注意到两个parentNode连用了吗?"parentNode.parentNode".第一个parentNode是div(id"childparent"),因为我们要得到最外层的父元素,所以另外加了一个parentNode就到了div(id"parent").
使用parentNode不只找到某个元素的nodeName,还会更多.例如,你可以获取包含大量元素的父节点,并在末尾添加一个新的节点. IE有它自己的名称叫做"parentElement",对于交叉浏览器脚本建议使用parentNode
以上这篇浅谈js的html元素的父节点,子节点就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。