jsDOM

1. DOM的概念

DOM中的D，表明“文档”.

若是没有文档，DOM也就无从谈起，当你建立的网页加载到浏览器时，DOM在幕后就悄然而生，，此时你的这个网页文档就是一个文档对象，也就是DOM中的D.css

DOM中的O，表明“对象”.

对象的相关知识咱们已经再上一章节学习过，主要包括用户自建对象，内建对象及宿主对象，那么这里的O表明的就是宿主对象，也就是浏览器给咱们提供的这部分对象。html

DOM中的M，表明“模型”.

这里首先要知道字面的模型是什么意思？生活中咱们常见的模型主要有飞机模型，汽车模型，人体模型等，不论是什么模型，他们都是某种事物的表现形式。就像飞机模型表明着一架真正的飞机，一张城市地图表明着某一座城市同样。那么，在这里的模型就指的是咱们这个网页，这个网页里的各类HTML元素都是构成这个模型的组件，他们相互包含又相互并列存在，构成一种父子、兄弟的关系，也就相似于一棵树的各个分支同样，许多的分支组成了这一棵树，这棵树就是一个模型。web

2. 节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点的概念</title>
</head>
<body>
 	<h1>这是一个标题</h1>
    <p title="这段文字的说明">这是一段文字说明，也是一个段落</p>
    <p>测试数据</p>
    <ul id="purchases">
        <li class="sale">这是一个列表</li>
        <li class="sale">这是一个列表</li>
        <li class="sale">这是一个列表</li>
        <li class="sale">这是一个列表</li>
    </ul>
</body>
</html>
复制代码

2.1 节点的概念

咱们以这个网页结构为例，DOCTYPE以后，一个html标签标识了整个文档的开始，这个网页里的全部其余元素都包含在这个标签当中。那么，按照咱们刚才说过的父子、兄弟关系来表示的的话，html标签至少是一个父亲，由于全部的元素其余元素都包含在其内部，他既没有父亲也没有兄弟，若是你要较真非要说它从哪里来，那么，咱们就把它比做女娲。再深刻一层咱们发现和两个分支,他们位于同一层且相互不包含，所以上他们就是兄弟关系，属于平辈。他们的父亲都是html标签。往下深刻，以此类推，都可以用父子、兄弟关系来描述这样一个网页，构成这些父子兄弟的元素分隔点，咱们就称其为节点。数组

2.2 节点分类

元素节点

以这个网页为例，它的元素节点就是构成这个网页结构的这些html标签，具体到这个网页就是<\h1>、<\p>、<\ul>这些元素就被成为元素节点。浏览器

文本节点

在一个网页中大部分的内容都由文原本提供，如这个网页里 p 标签所包含的那段文字，他就是一个文本节点，通常网页里的文本节点老是被包含在元素节点内部，但不是全部的元素节点都包含文本节点。markdown

属性节点

属性节点是元素节点的更具体描述，例如能够描述出他的类型，说明等，好比大部分元素都具有title属性，这个属性就是用来对每一个元素的内容加以说明，这个节点就是属性节点。学习

3. 获取元素

3.1 获取元素的方法

经过元素节点的id属性获取

document.getElementById(id)
复制代码

经过元素获取，它返回的是一个对象的数组

var Uli = document.getElementsByTagName(li)
var count = Uli.length
console.log(count)
> 4
for(var i=0; i<count; i++){
    // 弹出四次Object,返回的是一个对象数组
    alert(typeof Uli[i])
}
复制代码

两个结合使用

假如咱们给ul设置一个id为purchases的属性，咱们来获取这个id属性值包含多少个列表项。测试

var shopping = document.getElementById("purchases")
var items = shopping.getElementsByTagName("*")
console.log(items.length)
复制代码

经过元素的class属性获取

// 语法
document.getElementsByClassName("class")
复制代码

备注：这个方法返回值与getElementsByTagName()相似，返回的是具备相同类名的元素数组对象。特别注意中间的Elements这个单词最后是加了s的，注意跟getElementById()进行区别。ui

经过css选择器获取元素

// 获取文档中 id="purchases" 的元素：
document.querySelector('#purchases')

// 获取文档中第一个P元素
document.querySelector("p")

// 获取文档中class="sale"的第一个P元素
document.querySelector("p.sale")

// 获取文档中有p元素有title属性的第一个p元素
document.querySelector("p[title]")
/** 如下实例演示了多个选择器的使用方法。 假定你选择了两个选择器: <h2> 和 <h3> 元素。 如下代码将为文档的第一个 <h2> 元素添加背景颜色： **/
document.querySelector("h2, h3").style.backgroundColor = "red";
复制代码

querySelectorAll()获取所有元素，返回一个数组对象

var lisale = document.querySelectorAll("li.sale")
for(var i=0; i<lisale.length; i++){
    lisale[i].style.color = "red"
}
复制代码

3.2 知识点总结

一份文档就是一颗节点树
节点分为不一样类型：元素节点，属性节点，文本节点
getElementById()返回一个对象，该对象对应着文档里的一个特定的元素节点
getElementsByTagName()和getElementsByClassName()都返回的是一个数组对象，他们分别对应着一组特定的元素节点。
每一个节点都是一个对象
querySelector()能够经过css选择器，属性选择器，元素标签获取元素，返回一个特定的元素节点，拥有多个一样元素节点的只返回第一个。
querySelectorAll()返回的是一个数组对象，对应一组特定的元素节点

4. 获取和设置属性

经过以上咱们学过的获取元素方法获得元素后，咱们就能够设法获取他的各个属性，相应的也能够更改属性节点的值。url

4.1 getAttribute()获取属性

语法：获取到元素对象，经过对象.getAttribute()的方式获取对象的属性，她只有一个参数，是你打算查询属性的名字。

Object.getAttribute(attribute)
复制代码

备注：这个方法他不属于document，因此不能使用document对象调用。他只能经过元素节点对象调用。

// getAttribute()获取属性
var Plist = document.getElementsByTagName('p')
for(var i=0; i<Plist.length; i++){
    // 综合运用咱们学过的条件判断语句，让有属性时才执行
    if(Plist[i].getAttribute('title') != null){
        alert(Plist[i].getAttribute('title'))
    };   
}
复制代码

改进代码，写更少最好：

var Plist = document.getElementsByTagName('p');
for(var i=0; i<Plist.length; i++){
	var title_text = Plist.getAttribute('title')
// if写在一行的时候不须要大括号，单纯的检查值是否存在能够这样简写
	if(title_text) alert(title_text)
}
复制代码

4.2 setAttribute()修改元素节点的属性值

setAttribute()方法用来修改元素节点属性的值，与getAttribute()同样只能用在元素节点。

Object.setAttribute("属相名", "值")
复制代码

备注：这个方法有两个参数，第一个参数是要修改的属性名，第二个是要修改的值。

修改属性综合案例练习：

// setAttribute()修改属性值
var Plist = document.getElementsByTagName('p')
for(var i=0; i<Plist.length; i++){
    // 综合运用咱们学过的条件判断语句，让有属性时才执行
    if(Plist[i].getAttribute('title')){
        console.log(Plist[i].getAttribute('title'))
        Plist[i].setAttribute("title", "这是我修改后的值")
        console.log(Plist[i].getAttribute("title"))
    };   
}
> 这段文字的说明
> 这是我修改后的值
复制代码

setAttribute()还能够直接给元素增长属性，而且赋值

var Plist = document.getElementsByTagName('p')
for(var i=0; i<Plist.length; i++){
    var title_text = Plist[i].getAttribute('title');
    if(title_text){
        // 判断存在title属性，直接返回
        console.log(title_text);
    }else{
        // 不然不存在，为其增长并打印出结果
        Plist[i].setAttribute('title',"我为另外一个空白增长");
        new_title_text = Plist[i].getAttribute('title');
        console.log(new_title_text);
    };  
};
> 这段文字的说明
> 我为另外一个空白增长
复制代码

5.DOM知识点总结

本章主要学习了DOM提供的五个方法

getElementById() 返回一个特定元素节点对象
getElementsByTagName()
getElementsByClassName() 这两个返回一组特定的数组对象
getAttribute() 获取属性值
setAttribute() 修改属性值，设置属性和值
querySelector() 能够经过css选择器、元素、属性获取元素，多个返回第一个
querySelectorAll()返回一组特定的数组对象

JavaScript DOM知识点梳理