在实际前端开发工作中，我们经常会遇到要获取某些元素，以达到更新该元素的样式、内容等目的。而文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。也因此，JavaScript可以通过DOM API获取元素节点，方法有如下几种：
1、document.getElementById('id')
返回一个匹配特定 [ID]的元素.因为ID具有唯一性，所以通过此方法获取到的单个元素
举例：
<body>
<p> id="para1"> Some text here</p>
<script>
<b> var elem = document.getElementById("para1");</b>
</script>
</body>
2、document.getElementsByName()
该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有<b>同样名称</b>的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点
举例：
<body>
<form name="up"><input type="text"></form>
<div name="down"><input type="text"></div>
<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>
</body>
3、document.getElementsByTagName()
返回一个动态包含所有制定<b>标签名元素</b>的HTML集合
<body>
<ul>
<li>some</li>
<li>text</li>
<li>align</li>
</ul>
<script>
<b> var elem = document.getElementsTagName("UL");</b>
</script>
</body>
4、document.querySelector('#xxx')
返回文档中匹配制定CSS选择器的一个元素。返回匹配指定选择器的第一个元素。
举例：
document.querySelector('#id')
document.querySelector('p')
document.querySelector('.example')
document.querySelector('a[target]')
5、document.querySelectorAll('')[0]
与上面的3类似。区别就在于如果不加[0]，获取到的是包含该元素的数组集合
网友评论