文章目录
一、基本操作
1.1 增
新增一个元素节点分为两步（二者缺一不可），第一步：创建元素节点，第二步：将创建的元素节点插入到指定元素节点中（也就是插入指定元素节点的儿子元素节点）
<div id="box">原本存在的</div>
<script type="text/javascript">
var exDiv = document.querySelector("#box");//原本存在的div
var myDiv = document.createElement("div");//新增的div
var mySpan = document.createElement("span"); //新增的span
// 父元素.appendChild(新创建的子元素)
document.body.appendChild(myDiv);
exDiv.appendChild(mySpan); </script>
1.2 删
删除元素节点有两种方式：
- 直接删除获取到的元素节点
<div id="box1">
<p>p1</p>
<p>p2</p>
</div>
<div id="box2">
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
</div>
<script type="text/javascript">
var exDiv1 = document.getElementById("box1");
exDiv1.remove();
</script>
- 先获取要删除的元素节点的父元素节点，然后通过其父元素节点来删除儿子元素节点完成操作。
<div id="box1">
<p>p1</p>
<p>p2</p>
</div>
<div id="box2">
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
</div>
<script type="text/javascript">
var exDiv1 = document.getElementById("box1");
var exDiv2 = document.getElementById("box2");
var exSpan2 = document.getElementById("span2");
document.body.removeChild(exDiv1);
exDiv2.removeChild(exSpan2);
</script>
这种方式听起来有种多此一举的感觉，因为既然已经选择到了要删除的元素节点，为什么不通过上面介绍的方法直接删除，而是又去找了父元素节点，所以说，如果没有特殊需求，大多数情况下还是直接使用元素节点.remove()方法来实现元素节点的删除。
1.3 改
修改元素节点的操作也不常用，实用性较低，测试如下：
<div id="box">
<p>p1</p>
<p>p2</p>
</div>
<script type="text/javascript">
var obox = document.getElementById("box");
console.log(obox.outerHTML);
obox.outerHTML = "<span id='"+ obox.id +"'>"+ obox.innerHTML +"</span>";
</script>
网页的结构改变：
控制台的打印信息
可以看到outerHTML是包含了整个元素节点的信息
1.4 查（选择器）
1.4.1 基本选择器
- 常规
<div id="box">div_id_1</div>
<div id="box">div_id_2</div>
<div id="char">div_id_2</div>
<div class="cont">div_class_1</div>
<div class="cont">dic_class_2</div>
<div class="pre">dic_class_2</div>
<span>span1</span>
<span>span2</span>
<input type="text" name="user" id="user2" value="user2" />
<input type="text" name="user" id="user1" value="user1" />
<input type="text" name="pass" id="user" value="pass" />
<script type="text/javascript">
//id:返回的是单个元素，就算有多个，获取的也只是一个
var oBox = document.getElementById("box");
console.log("id选择结果：" , oBox);
console.log("直接获取结果的网页内容" , oBox.innerHTML);
console.log("第一个" , oBox[0]);
console.log("第一个的网页内容oBox[0].innerHTML会报错");
console.log("-------------------------------------------");
//class:返回的是数组，就算只有一个，获取的也是数组
var aCont = document.getElementsByClassName("cont");
console.log("class选择结果：" , aCont);
console.log("直接获取结果的网页内容" , aCont.innerHTML);
console.log("第一个" , aCont[0]);
console.log("第一个的网页内容" , aCont[0].innerHTML);
console.log("-------------------------------------------");
//tag:返回的是数组，就算只有一个，获取的也是数组
var aSpan = document.getElementsByTagName("span");
console.log("tag选择结果" , aSpan);
console.log("直接获取结果的网页内容" , aSpan.innerHTML);
console.log("第一个" , aSpan[0]);
console.log("第一个的网页内容" , aSpan[0].innerHTML);
console.log("-------------------------------------------");
//name:返回的是数组，就算只有一个，获取的也是数组，
var aUser = document.getElementsByName("user");
console.log("name选择结果" , aUser);
console.log("直接获取结果的网页内容" , aUser.innerHTML);
console.log("第一个" , aUser[0]);
console.log("第一个的网页内容" , aUser[0].innerHTML);
</script>
- ES5新增
ES5新增了方法querySelector()和querySelectorAll()，可以用CSS选择器来做为参数传入，两者搭配可以实现以上所有方法，所以是现在选择器的首选方法。
<ul>
<li>1</li>
<li class="two">2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="msg">
<h2>msg_h2_1</h2>
<h2>msg_h2_2</h2>
<span>msg_span</span>
</div>
<div id="box">box_1</div>
<div id="box">box_2</div>
<div id="box">box_3</div>
<div class="cont">cont_1</div>
<div class="cont">cont_2</div>
<div class="cont">cont_3</div>
<span>span_1</span>
<span>span_2</span>
<span>span_3</span>
<input type="text" name="sex" value="" />
<input type="text" name="sex" value="" />
<input type="text" name="user" value="" />
</body>
<script type="text/javascript">
//返回的是单个元素，就算有多个，获取的也只是第一个
var obj1 = document.querySelector("#box");
var obj2 = document.querySelector(".cont");
var obj3 = document.querySelector("span");
var obj4 = document.querySelector("#msg h2");
var obj5 = document.querySelector("#box,.cont");
console.log("以下为querySelector获取结果");
console.log("#box匹配" , obj1);
console.log(".cont匹配" , obj2);
console.log("span匹配" , obj3);
console.log("#msg h2匹配" , obj4);
console.log("#box,.cont匹配" , obj5);
console.log("----------------------------------------------------------");
//返回的是数组，就算只有一个，获取的也是数组，操作数组中的数据时，要解析
var arr1 = document.querySelectorAll("#box");
var arr2 = document.querySelectorAll(".cont");
var arr3 = document.querySelectorAll("span");
var arr4 = document.querySelectorAll("#msg h2");
var arr5 = document.querySelectorAll("#msg *");
var arr6 = document.querySelectorAll("#box,.cont,span");
console.log("以下为querySelectorAll获取结果");
console.log("#box匹配" , arr1);
console.log(".cont匹配" , arr2);
console.log("span匹配" , arr3);
console.log("#msg h2匹配" , arr4);
console.log("#msg *匹配" , arr5);
console.log("#box,.cont,span匹配" , arr6);
</script>
1.4.2 关系选择器
- 父子关系
<div class="msg">
<div class="xbox">
<h2>msg_xbox_1</h2>
<h2>msg_xbox_2</h2>
</div>
<h2>msg_1</h2>
<h2>msg_2</h2>
</div>
<script type="text/javascript">
// 父选子元素:返回的是数组，就算只有一个，获取的也是数组，操作数组中的数据时，要解析
var omsg1 = document.querySelector(".msg");
console.log("msg的子元素：" , omsg1.children);
console.log("msg的第一个子元素：" , omsg1.children[0]);
// 第一个子元素:返回的是单个元素
var omsg2 = document.querySelector(".msg");
console.log("msg的第一个子元素：" , omsg2.firstElementChild);
// 最后一个子元素:返回的是单个元素
var omsg3 = document.querySelector(".msg");
console.log("msg的最后一个子元素：" , omsg3.lastElementChild);
console.log("----------------------------------------");
// 子选父元素:返回的是单个元素
var oxbox = document.querySelector(".xbox");
console.log("xbox的父元素：" , oxbox.parentNode);
</script>
- 兄弟关系
<div id="box">box_1</div>
<div id="box">box_2</div>
<div class="msg">
<div class="xbox">
<h2>msg_xbox_1</h2>
<h2>msg_xbox_2</h2>
</div>
<h2>msg_1</h2>
<h2>msg_2</h2>
</div>
<div class="cont">cont_1</div>
<div class="cont">cont_2</div>
<script type="text/javascript">
// 上一个兄弟元素:返回的是单个元素
var omsg1 = document.querySelector(".msg");
console.log("msg的上一个兄弟元素：" , omsg1.previousElementSibling);
// 下一个兄弟元素:返回的是单个元素
var omsg2 = document.querySelector(".msg");
console.log("msg的下一个兄弟元素：" , omsg2.nextElementSibling)
</script>
二、尺寸操作
DOM中没有规定如何确定页面中与元素的大小，IE率先映入了一些属性来确定页面中元素的大小，以便开发人员使用，目前，所有主要的浏览器都已经支持这些属性了。
2.1 偏移量（单位为像素）
首先介绍的属性涉及偏移量，包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过以下4个属性可以取得元素的偏移量。
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
offsetHeight：元素在垂直方向上占用的空间大小。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度号右边框宽度。
offsetLeft：元素的左外边框至父元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至父元素的上内边框之间的像素距离。
当然，要想知道某个元素在整个页面上的偏移量，将该元素及其所有祖先元素的offsetLeft和offsetTop对应相加，直至根元素，就可以得到结果，下面是相对于页面的offsetLeft值（offsetTop获取方式一样）：
<style type="text/css">
*{margin:0;padding:0;}
#fu{width:100px;height:100px;background:red;margin:100px;padding:20px;}
#fu .zi{width:20px;height:20px;background:black;}
</style>
<div id="fu">
<div class="zi"></div>
</div>
<script type="text/javascript">
var oZi = document.querySelector(".zi");
function getElementLeft(element){
var elementLeft = element.offsetLeft;
var fu = element.offsetParent;
while(fu != null){
elementLeft += fu.offsetLeft;
fu = fu.offsetParent;
}
return elementLeft;
}
console.log("offsetLeft值为：" + getElementLeft(oZi) + "px");
</script>
【注】所有偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用某些属性的值，可以将它们保存在局部变量中，以提高性能。
2.2 客户区大小（单位为像素）
元素的客户区大小指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。
clientWidth：元素内容区宽度加上左右内边距宽度
clientHeight：元素内容区高度加上上下内边距高度
从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内，最常用到这些属性的情况就是：确定浏览器视口大小的时候，要确定浏览器视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight。
【注】与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的。
2.3 滚动大小（单位为像素）
滚动大小指的是包含滚动内容的元素的大小。有些元素（例如<html>元素），即使没有执行任何代码也能自动的添加滚动条：但另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动。以下4个与滚动大小相关的属性。
scrollHeight：元素内容的实际总高度
scrollWidth：元素内容实际总宽度
scrollLeft：被隐藏的内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动的位置
scrollTop：被隐藏的内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置
scrollWidth和scrollHeight主要用于确定元素内容的实际大小，scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离。所以，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight
在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果，比如：
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
通过scrollLeft和scrollTop属性既可以确定元素当前滚动状态，也可以设置元素的滚动位置。在元素尚未滚动时，这两个属性的值都等于0.
总览图：
三、总结
- 元素节点作为操作页面最常用的节点，又可以通过HTML语言中的标签名以及标签的属性名id、class以及name来获取
- 元素节点的获取方法在ES5中新增了querySelector()和querySelectorAll()方法，这两个方法用CSS选择器来做为参数，两者搭配可以获取到所有元素节点，是获取元素节点的首选方法。
- 元素节点的新增需要先创建再插入。
- 元素节点的删除用remove()方法最方便。
- 元素节点的修改操作存在，但是不常用。
- 元素的尺寸分为偏移量、客户区以及滚动距离，它们的单位都为像素。
