DOM（Document Object Model，文档对象模型），DOM定义了访问和操作HTML文档的标准方法。DOM 以树结构表达 HTML 文档。
Document树
获取标签（元素）
-
document.getElementById("元素的ID名")通过ID名字来获取元素（如果ID名重复了，只能获取到第一个）。如果页面没有该元素，返回null。 -
document.getElementsByClassName("类名")通过类名来获取元素。此方法将获取到同一类名的一个集合（HTMLCollection对象），可以通过下标访问（从0开始），length代表长度。即使页面只有一个元素或者没有元素，也会返回这个对象。 -
document.getElementsByTagName("标签名")通过标签名获取元素，使用方法和第二种相似 -
document.getElementsByName("nameValue")通过元素name获取元素，通常用于获取表单元素具有相同name的标签 -
document.querySelector("CSS选择符")通过CSS选择符来获取元素，返回匹配到的第一个元素
document.querySelector("CSS选择符")通过CSS选择符来获取元素，返回匹配到元素集合 -
document.documentElement获取HTML标签
document.body获取body标签
var ID = document.getElementById("ID");
var className = document.getElementsByClassName("class")[0];
var tagName = document.getElementsByTagName("div")[0];
var nameName = document.getElementsByName("input")[0];
var div1 = document.querySelector(".class");
var div2 = document.querySelectorAll("#ID");
var html = document.documentElement;
var body = document.body;
以上方法均可再页面中获取标签，document表示在全局下获取，在使用时也可以通过其他的节点来获取。其中document.getElementsByTagName和document.getElementsByTagName属于动态获取，即使页面上的内容是通过JavaScript后面动态添加的，也能获取到，而其他的方法是获取不到的。
获取节点
- 获取子节点
-
父节点.children返回保存子元素的集合，是一个HTMLcollection对象
<div>
<p></p>
<p></p>
<p></p>
</div>
<script type="text/javascript">
var div = document.querySelector("div");
console.log(div.children); //IE8以下会返回文本节点
</script>
-
父节点.childNodes返回一个NodeList对象，NodeList是一种类数组对象，可以通过位置来访问这些节点。
<div>
<p></p>
<p></p>
<p></p>
</div>
<script type="text/javascript">
var div = document.querySelector("div");
console.log(div.childNodes); //IE9之前不会返回文本节点
</script>
- 获取父节点
-
元素.parentNode获取文档树中的父节点 -
元素.offsetParent获取当前元素最近的有定位的父节点
<div class="parent">
<div class="son"></div>
</div>
<script type="text/javascript">
var son = document.querySelector(".son");
console.log(son.parentNode);
console.log(son.offsetParent);
</script>
- 获取其他节点
-
元素.firstElementChild//(IE)元素.firstChild获取元素的首个子节点 -
元素.nextSibling//(IE)元素.nextElementSibling获取下一个兄弟节点 -
元素.previousSibling//(IE)元素.previousElementSibling获取上一个兄弟节点
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
<script type="text/javascript">
var parent = document.querySelector(".parent");
var son2 = document.getElementsByClassName("son2")[0];
console.log(parent.firstElementChild);
console.log(son2.nextElementSibling);
console.log(son2.previousElementSibling);
</script>
- 获取节点信息
-
节点.nodeName获取标签节点标签名字 -
节点.nodeValue获取文本节点内容 -
节点.nodeType获取文本类型（标签-1，属性-2，文本-3）
<div class="parent">hello world</div>
<script type="text/javascript">
var parent = document.querySelector(".parent");
console.log(parent.nodeName);
console.log(parent.childNodes[0].nodeValue);
console.log(parent.nodeType);
</script>
操作节点
- 创建节点
-
document.createElement("标签名")创建一个标签对象 -
document.createTextNode("文本")创建一个文本对象
- 添加节点
-
父元素.appendChild(节点对象)向父元素末尾添加一个节点 -
父元素.insertBefore(子对象,参考节点)向参考节点前插入一个子节点
<div class="demo">
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
<script type="text/javascript">
var demo = document.getElementsByClassName("demo")[0];
var p2 = document.getElementsByClassName("p2")[0];
//创建节点并添加文本
var p3 = document.createElement("p");
var text = document.createTextNode("text");
p3.appendChild(text);
//在p2之前插入p3
demo.insertBefore(p3, p2);
console.log(demo);
</script>
- 删除节点
父元素.removeChild(需要删除的节点)
<div class="demo">
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
<script type="text/javascript">
var demo = document.getElementsByClassName("demo")[0];
var p2 = document.getElementsByClassName("p2")[0];
demo.removeChild(p2);
console.log(demo);
</script>
- 替换节点
父元素.replaceChild(新节点,需要替换的节点)
<div class="demo">
<p class="p1">p1</p>
<p class="p2">p2</p>
</div>
<script type="text/javascript">
var demo = document.getElementsByClassName("demo")[0];
var p2 = document.getElementsByClassName("p2")[0];
var p3 = document.createElement('p');
p3.innerText = "p3";
demo.replaceChild(p3, p2);
console.log(demo);
</script>
- 复制节点
被复制节点.cloneNode(Boolean)复制节点并返回，参数代表是否复制节点内容
<div class="demo">div1</div>
<script type="text/javascript">
var demo = document.getElementsByClassName("demo")[0];
var copy = demo.cloneNode(true);
console.log(copy);
</script>
网友评论