之前学习的属于JS的核心语法,ECMA的语法，接下来开始我们就要学习JS控制页面上的元素了。
1. DOM认知
DOM（Document Object Model，文档对象模型）描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。这使得JavaScript操作HTML，不是在操作字符串，而是在操作节点，极大地降低了编程难度。
DOM对很多东西做了抽象，提供了丰富的API：取得元素、css样式、事件、运动、元素尺寸位置、节点操作。每个知识体系都非常庞大，千丝万缕。
DOM的结构呈树状，所以也把DOM叫做DOM树，DOM树是由很多DOM节点组成的
2. 认识DOM节点
2.1 DOM树
dom.gif
2.2 DOM 常用节点
元素节点 1
属性节点 2
文本节点 3
注释节点 8
document 文档节点 9
DocumentFragment 文档片段节点 11
2.3 DOM节点属性
nodeName 元素节点的标签名,以大写字母的形式表示,只读不能修改
nodeValue 文本节点和注释节点的内容,可读可写
nodeType 节点的类型(最有用的),帮助我们区分节点,只读
attributes 元素节点的属性集合(只能修改属性值), name 属性名,value 属性值
3. 获取DOM元素
查: 查询DOM节点
document 获取document文档(这是一个对象)
document.head 获取head标签
document.body 获取body标签
document.documentElement 获取html标document.getElementById() 通过id获取元素(IE7以下不区分大小写,会获取name属性)
element.getElementsByTagName() 通过标签名获取元素
document.getElementsByName() 通过name属性获取
注意,只用部分标签可用,通过name属性获取元素(表单,表单元素,img,iframe);
element.getElementsByClassName() 通过class类名获取
通过class获取元素(ie8及以下ie版本中没有,可以多个class一起写)
element.querySelector() 选到指定选择器下的第一个元素(ie7及以下没有)
element.querySelectorAll() 选到指定选择器的所有元素(ie7及以下没有)现在ie7以下用的很少了 ,可以放心用,但是这两个方法获取的不是实时的,是静态的,选择的是快照,副本.
<div id='box'></div> <div></div> <div></div> <script> var div = document.getElementsByTagName("div") var oBox = document.getElementById('box'); oBox.remove(); console.log(div); </script>动态获取与静态获取
get系列是动态获取 每次使用时会重新获取
query系列是静态获取
3.1 获取元素节点
HTML负责页面的布局、结构。JS要操作HTML标签，第一件事儿就是得到这个元素(标签)。
说白了，就是把HTML标签拿到JS里面来。
JavaScript通过document对象表示文档，它表示整个页面。它有很多属性和方法，包含了绝大多数多页面的特征和操作。学习DOM，说白了就是学习document对象。
//全线浏览器兼容的，得到元素的方法，就这两个：
document.getElementById() //通过id得到元素
document.getElementsByTagName(); 通过标签名得到元素们
3.2 getElementById()
getElementById()方法，通过id获取元素
这个单词实际上是由几个小单词组成的：get得到 Element元素 By通过 Id id属性
var oBox = document.getElementById("box");
console.log(typeof oBox); //object
需要注意的是，getElementById里面就写id就行了，不要多写#
如果说页面上没有匹配的id的HTML元素，将返回null，
id大小写要严格区分，但是在IE7及以下中，大小写是不区分的。
IE7及较低版本还有一个怪癖，表单元素name特性也会被当做id。
为了避免这个问题，所以页面上的name最好也不要和任何id的名字相同。
<input type="text" name="haha" />
<script type="text/javascript">
var oInput = document.getElementById("haha");
</script>
3.3 getElementsByTagName
getElementsByTagName就是通过标签名得到元素，得到的是页面上所有该种标签元素，得到的是类数组，数组可以有下标，开始是0，最后一项是.length-1
var ops = document.getElementsByTagName("p");
3.4 连续打点调用get
先获取一个HTML标签，然后选择这个HTML标签中的所有p标签：
var ps = document.getElementById("box2").getElementsByTagName("p");
不要多写一个document,下面的写法是错误的
var ps = document.getElementById("box2").document.getElementsByTagName("p");
连续get可以很疯狂，但是如果是数组，一定要加上下标，才能变成对象：
document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("span")[1].style.color = "red";
4. 节点的操作
4.1 基于节点树的操作(兼容所有浏览器)
parentNode 父节点(最顶端的parentNode为#document)
childNodes 子节点们
firstChild 第一个子节点
lastChild 最后一个子节点
nextsibling 下一个兄弟节点
previousSibling 上一个兄弟节点
4.2 基于元素节点树的操作(除了children,其他都不兼容IE9及以下)
parentElement 父元素节点
children 子元素节点们
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementChild 上一个兄弟元素节点
封装一个方法获取元素的所有子元素节点组成的数组,不允许用children
function retElementChild(node){
var arr = [],
child = node.childNodes,
len = child.length;
for(var i = 0; i < len; i++){
if(child[i].nodeType == 1){
arr.push(child[i])
}
}
return arr;
}
4.3 增:创建DOM节点
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.createComment() 创建注释节点
document.createDocumentFragment 创建文档片段节点
4.4 插:添加(剪切操作)
parentNode.appendChild(A) 在parentNode的最后面添加节点A
parentNode.insertBefore(A,B) 把节点A添加在节点B前面
4.5 删:删除节点
parentNode.removeChild(A) 删除节点A
child.remove()
4.6 替换(剪切操作)
parentNode.replaceChild(A,B) 用节点A代替节点B
4.7 判断一个元素节点有没有子节点方法
element.hasChildNodes() 如果有则返回true。没有则返回false
5. 节点的一些属性和方法
5.1 元素节点常用的属性
- innerHTML 获取元素节点的内容，可读可写
如果内容中有符合html格式的，会被解析成标签- innerText 获取元素节点的内容，可读可写
如果内容中有符合html格式的，不会被解析成标签innerText在赋值的时候要注意,会将标签覆盖掉
注意: 老版本的火狐不兼容innerText.火狐有自己的属性textContent,但是textContent老版本IE(8及以下)不兼容
5.2 元素节点常用的方法
设置或获取标签属性
element.setAttribute(“class”,“on”) 设置元素节点的class属性
element.getAttribute(“class”) 获取元素节点的class属性
element.removeAttribute(“class”) 删除元素节点的class属性
<style>
.on{
color:#fff;
font-size:20px;
background-color:orange;
}
</style>
<div id="box">wuwei</div>
<script>
var oBox = document.getElementById('box');
oBox.setAttribute('class','on');
</script>
6. 更改HTML的属性
JS可以更改HTML的任何属性，方法是两种：点语法 和 setAttribute()、getAttribute()。
6.1 getAttribute(),setAttribute()
getAttribute(); //获取属性
setAttribute(); //设置属性
oImg.setAttribute("src","images/2.jpg");
等价于
oImg.src = “images/2.jpg”;
6.2 点语法
得到一个元素之后，直接打点调用它的属性名，就能对HTML相应的属性进行更改。可以获取,也可以设置
oImg.src = "images/2.jpg";
oLianjie.href = "http://www.163.com";
oBox.value = "嘻嘻嘻嘻嘻";
class这个属性，要换成className，因为class是JS的保留字。
oDiv.className = "da";
如果想要换一个HTML元素的class属性，那么就要打点调用.className属性。
6.3 点语法与getAttribute(),setAttribute()的区别
第一，所有自定义的属性，都不能通过点语法获取和设置
设置自定义属性
<div id='box'></div>
oBox.wu='name';
oBox.setAttribute("wu","name"));
此时点操作符不能设置自定义属性
获取自定义属性
<div id='box' wu='haha'></div>
alert(oBox.wu); //undefined，自定义的属性，不是w3c的属性，都不能用点语法
alert(oBox.getAttribute("wu")); //haha
第二，所有的行内样式，点语法.style得到的是一个样式对象。我们可以通过.style.border继续得到小样式。
但是getAttribute()得到的是字符串
var oBox = document.getElementById("box");
console.log(typeof oBox.style); //object
console.log(typeof oBox.getAttribute("style")); //string
第三，getAttribute()不需要避讳，直接
oDiv.getAttribute(“class”); //就行了
点语法的效率远高于getAttribute()、setAttribute()。
所以，如果操作自定义的属性，偶尔用一次setAttribute,getAttribute，除此之外，都用点语法。
6.4 关于H5新增的元素节点的classList属性
classList 属性是一个类数组,其身上有几个常用的方法
- add(value) 将给定的参数字符串添加到元素的class属性中,如果存在就不添加了
- remove(value) 将给定的参数字符串从class属性中删除
- contains(value) 返回布尔值,表示class属性中是否包含参数字符串
- toggle(value) 检测class属性中是否有参数字符串 有则删除 返回false,没有则添加,返回true
这个属性IE9及其一下不能用
6.5 H5新增了自定义属性,但是需要以data-开头
元素节点有一个dataset属性用来获取和设置自定义属性
<div id="box" data-myName="wuwei" data-appId="123">我是div</div>
var div = document.getElementById('box');
// 获取自定义属性值
console.log(div.dataset); // {myname: "wuwe", appid: "12"}
div.dataset.myName; // wuwei
div.dataset.appId; // 123
// 修改自定义属性值
div.dataset.myName = 'haha'; //haha
div.dataset.appId = '234'; // 234
IE10及以下不兼容
网友评论