标签:element 实例 ext 查找 ntc 节点 基础 first logs
DOM(document object model)对象把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树),定义了访问和操作HTML文档的标准方法。
一、查找标签
1、直接查找标签
总共有如下四种直接查找的方式:
document.getElementById(“idname”) //通过id名 document.getElementsByTagName(“tagname”) //通过标签名 document.getElementsByName(“name”) //通过name名 document.getElementsByClassName(“name”) //通过class名
上述四种查找中,因为id的唯一性,得到结果就是对应标签对象。但是对于其他三种方式,因为其不唯一性,得到是包含满足条件的对象数组,通过数组索引可以取到相应的element对象,注意即使结果就一个对象,它也是一个对象数据。
<body> <div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> /*通过document对象可以查找任何级别的对象*/ var div1=document.getElementById("div1");
/*通过查找到的element对象(必须是id对象)查找其子级标签时,不支持通过id和name查找*/ //支持; var ele= div1.getElementsByTagName("p"); alert(ele.length); //支持 var ele2=div1.getElementsByClassName("div2"); alert(ele2.length); //不支持 var ele3=div1.getElementById("div3"); alert(ele3.length); //支持 var ele3_=document.getElementById("div3"); console.log(ele3_) //不支持 var ele4=div1.getElementsByName("yuan"); alert(ele4.length) //支持 var ele4_=document.getElementsByName("yuan") alert(ele4_.length) </script> </body> </html>
2、导航查找
导航查找即是通过通过某个标签定位其他标签,主要属性如下:
‘‘‘
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nexElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
‘‘‘
实例如下:
<script> var ele1=document.getElementById("div1"); var child=ele1.children; alert(child.length) ; //结果为4,得到是一个对象数组 var first=ele1.firstElementChild; console.log(first); //得到第一个孩子对象:<div class="div2">i am div2</div> var last=ele1.lastElementChild; console.log(last); //得到最后一个孩子对象: <p>hello p</p> var ele2=document.getElementById("div3"); var parent=ele2.parentElement; console.log(parent); //获得父级对象 var next=ele2.nextElementSibling; console.log(next); //得到下一个紧挨的兄弟对象:<p>hello p</p> var privous=ele2.previousElementSibling; console.log(privous); //得到上一个紧挨的兄弟对象:<div name="yuan">i am div2</div> </script>
二、标签操作
1、文本操作
标签:element 实例 ext 查找 ntc 节点 基础 first logs
原文地址:http://www.cnblogs.com/seven-007/p/7816328.html