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、文本操作
时间： 2024-11-29 11:34:52