什么是DOM
**DOM文档对象模型，是针对HTML和XML文档的一个API（应用程序接口）
D(Document)：可以理解为整个web加载的网页文档
O(Object):（对象）类似window对象,可调用属性和方法
M(Model):（模型）网页文档的树形结构 **
获取元素的方法
1 .通过ID获取元素
doument.getElementById(“elementId”)
通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
<div id="Identity">
</div>
<script>
var a = document.getElementById('identity')
</script>
2.通过节点名获取元素
document.getElementsByName(“elementsName”)
该方法是通过节点的name获取节点，该方法返回的有同样名称的节点数组。通过要获取节点的某个属性来循环判断是否为需要的节点
<p name="index">
</p>
<script>
var a = document.getElementsByName('index')
</script>
3.通过节点标签名称获取元素
document.getElementByTagName(“tagName”)
该方法是通过节点的Tag获取节点，该方法与document.getElementsByName()相似,同样返回一个数组
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<script>
var a = document.getElementByTagName('li')
</script>
4通过元素类名获取元素
document.getElementsByClassName(“classname”)
同样返回的是一个数组,当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点
<div class="category">
</div>
<script>
var a = document.getElementsByClassName('category')
</script>
5.querySelector 和querySelectorall
querySelector
该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log('#foo\bar') // "#fooar"
document.querySelector('#foo\bar') // 不匹配任何元素
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一个div
document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二个div
</script>
注意:
- 如果没有找到匹配元素，则返回 null
- 如果找到多个匹配元素，则返回第一个匹配到的元素。
- 如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素。
- 如果指定的选择器不合法，则抛出 SYNTAX_ERR异常
querySelectorAll
该方法返回所有满足条件的元素，结果是个nodeList集合。
var matches = document.querySelectorAll("div.note, div.alert");
6.通过父节点获取
node.firstChild
指向node列表中的第一个节点
<p id="para-01"><span>First span</span></p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstChild.nodeName)
</script>
node.lastChild
指向node列表中的最后一个节点
<p id="para-01">
<span>span1</span>
<span>span2</span>
</p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.lastChild.nodeName)
</script>
7通过临近节点获取
node.previousSibling
返回当前节点的前一个兄弟节点,没有则返回null.
//<a><b1 id="b1"/><b2 id="b2"/></a>
alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
node.nextSibling
返回当前节点的后一个兄弟节点,没有则返回null.
//<a><b1 id="b1"/><b2 id="b2"/></a>
alert(document.getElementById("b1")..nextSibling.id); //"b2"
alert(document.getElementById("b2")..nextSibling); // null
8通过子节点获取
node.parentNode
获取该节点的父节点
if (node.parentNode) {
//从树中删除一个节点,除非它已不在树上
node.parentNode.removeChild(node);
}
网友评论