在实际前端开发工作中，我们经常会遇到要获取某些元素，以达到更新该元素的样式、内容等目的。而文档对象模型 (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]，获取到的是包含该元素的数组集合
DOM API 获取元素的 N 种方法
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 什么是DOM？ DOM：Document Object Model DOM翻译过来是文档对象模型，是HTML和XM...
- DOM 是什么 文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结...
