DOM

Document Object Model 文档对象模型 - - 作用是操作HTML页面中的元素

概念

1. 元素 - - element

HTML页面中有很多个标签，每个标签都是一个元素(element)，每个元素都是一个对象，标签是可以嵌套的，所以元素可以包含元素；可以简单的把元素就理解成标签。

2. 节点 - - Node

HTML文档中所有的内容都叫节点：文本、标签、标签的属性

3.DOM树

我们可以把HTML文档当做根，由HTML文档及文档中所有的标签元素组成的一个树形结构叫做DOM树

一、元素

DOM获取元素

根据元素id属性值：document.getElementById(标签的id字符串); 返回的是标签对象；
根据标签名称：document.getElementsByTagName(标签名称字符串); 返回的是一个标签数组；
表单元素还可以通过name属性的值：document.getElementByName(“表单标签的name属性的值”);的方式来获取；
根据类选择器名称来获取元素 var eleArray = document.getElementsByClassName(“类选择器名称”); - - 属于H5，IE8 不支持
根据css选择器名称来获取元素
- var obj = document.querySelector("#banner"); 返回的是一个元素对象；
- var objArray = document.querySelectorAll(".banner-li"); 返回是一个NodeList-元素数组；

上面两个可以互相调用，可以获取指定元素内部的元素；
还可以通过DOM直接获取元素：

document.body ; - - 获取的是body标签；
document.title; - - 获取的是title的值；
document.documentElement; 获取的是当前页面的html标签；

创建元素的三种方式

1. document.write(“HTML标签及代码”);

注意：当页面加载完毕后触发这种方式创建元素会将原有页面所有内容都清除掉；只有当页面没有加载完毕时使用该方式才有效果。

2. dom获取的对象.innerHTML = “HTML标签及代码”;

需要注意的是不要使用document.body.innerHTML = “”; 这种写法和上面的document.write效果是一样的，也会清除页面所有的数据。

3. document.createElement(“标签的名称”);

该方式分为两步：

1）创建元素 var eleObj = document.createElement(“标签名称”);
2）添加元素：
- 追加到父元素中：- - 将创建的元素追加到父级元素中 parentObj.appendChild(eleObj);
- 加到指定的子元素的前面：比如从前面插入 - - parentObj.insertBefore(eleObj,parentObj.firstElementChild);
- 替换指定的子元素： parentObj.replaceChild(eleObj,要被替换的元素);
删除子元素：以删除第一个子元素为例 - - parentObj.removeChild(parentObj.firstElementChild);
删除所有的子元素，可以通过循环删除第一个子元素来实现：
```
while(parentObj.firstElementChild){
	parentObj.removeChild(parentObj.firstElementChild);
}
```

DOM给元素绑定事件

一些常用的事件：

点击事件： - - .onclick = function () { 事件处理逻辑};
鼠标悬停事件： - - .onmouseover = function () {事件处理};
鼠标离开事件： - - .onmouseout = function () {事件处理};
鼠标移动事件： - - .onmousemove = function(){事件处理};
获取焦点事件： - - .onfocus = function() {事件处理};
失去焦点事件： - - .onblur = function(){事件处理};

给元素绑定事件的三种方式：

1） addEventListener(事件类型, 事件处理函数,布尔类型) -可以为同一个元素绑定相同的事件多次。- - Chrome和Firefox、IE11支持，但是IE8不支持该方式；
- 参数1 - - 字符串类型，事件类型即事件名称去掉on，比如下面会提到一些常用的事件，以点击事件为例 btn.addEventListener(click,func,false);
- 参数2 - - 事件处理函数，可以是命名函数或者匿名函数；
- 参数3 - - 布尔类型，默认为false
2） attachEvent(事件类型，时间处理函数)；可以为同一个元素绑定相同的事件多次。Chrome和Firefox、IE11不支持，IE8支持
- 参数1 ：事件类型，和上面的区别在于这里需要on，及事件名全称；
- 参数2：和上面那种的一样
3）直接通过 .带on的事件名称 = 时间处理函数；该方式注册事件，如果又多次添加相同的事件的话，只会执行最后一次；
关于事件的一些其他的详细说明见跟着艾文一起学前端-第16篇-JavaScript - DOM中的事件。

绑定事件的代码兼容

分析，需要给指定元素添加指定的事件及事件处理函数，所以需要封装的函数应该含有三个参数：

function setEventListener(element , eventType , fuc){
	if(element.addEventLister){//判断有没有addEventLister这个方法，有的话直接调用
		element.addEventListener(eventType,fuc,false);
	}else if(element.attachEvent) {
		element.attachEvent("on"+eventType,fuc);
	}else {
		element["on"+eventType] = fuc;
	}

}

DOM 设置改变元素的属性

改变双标签内的文字： document.getElementById(标签id).innerText = “要修改的内容”;
改变标签的样式：
- 1）直接修改css属性的值：document.getElementById(标签id).style.css样式属性 = “样式属性值”；这里的样式属性，写法是css用短横线连接的横线去掉且横线后的单词首字母大写，比如background-color - - 写成backgroundColor;
- 2）通过修改类选择器的名称： document.getElementById(标签id).className=“要变更到的类选择器名称”;

innerText 和innerHTML属性

innerText 属性
- 当用于设置文本内容时：只是用来设置文本的，如果给它赋值内容中包含HTML标签的话，是没有标签的效果的；
- 当用于获取文本内容时：它会获取到该标签以及所含标签的文本内容，及它获取的是当前标签和子标签里的所有文本内容但是不能获取标签名称以及标签括号；
innerHTML 属性
- 则设置内容时也是可以设置文本内容的，并且它也可以设置新的HTML标签的话，是有标签效果的；且innerHTML不存在兼容的问题，所以即便是设置内容的话也推荐使用该方式。如果使用innerText或者innerContent的话需要做兼容，兼容方式见下文。
- 但是获取的时候是将里面所有的文本都获取出来了包括里面子标签的开始和结束标签；

兼容问题

1.设置/获取双标签里的文本内容

.textContent 属性是Firefox浏览器制定的标准，建议使用.textContent 属性，但是该属性IE8不支持；
.innerText 属性是IE8的标准，但是低版本的Firefox浏览器不支持；
如果某个属性在浏览器中不受支持，那么它的类型被解析为undefined及未定义类型；
所以可以判断某一属性的类型是不是undefined，就知道浏览钱是否支持该属性；
所以可以通过如下方式兼容设置和获取双标签中的文本内容：

//设置双标签中的文本内容
function setTagText(element, textCont) {
	if(typeof element.textContent == "undefined") {
		element.innerText = textCont;
	}else {
		element.textContent = textCont;
	}
}
//获取双标签中的文本内容
function getTagContent(element) {
	if(typeof element.textContent == "undefined") {
		return element.innerText;
	}else {
		return element.textContent;
	}
}

自定义属性

1. 添加、获取自定义属性

1）直接给HTML标签添加一个属性：如果给一个HTML标签添加一个自定义的属性，如何获取它的属性值，通过DOM获取的对象是无法直接调用该属性的，需要通过获取到的DOM对象的.getAttribute(“属性名称”);这种方式来获取自定义的属性值；
2）通过jsDOM方式添加一个属性，obj.setAttribute(“属性名称”, 属性值); 获取的时候也是使用 obj.getAttribute(“属性名称”);

2. 删除自定义属性

直接通过dom对象调用.removeAttribute(“自定义属性名称”);–该方法也支持删除自身本来的属性，但是不建议。

二、节点

节点可以分为三类：标签、属性、文本，它们的属性可以使用：

标签节点.属性；
属性节点.属性；
文本节点.属性；

节点常用的属性：

nodeType - 节点的类型，获取到的值如下：
- 1 - - 说明是标签；
- 2 - - 是属性；
- 3 - - 是文本；
nodeName - 节点的名字不同类型的节点可获取的值如下:
- 标签节点 - - 获取到的是：大写的标签名称
- 属性节点 - - 获取到的结果：小写的属性名称
- 文本节点 - - 获取到的结果：#text
nodeValue - 节点的值，不同节点获取到的值如下：
- 标签节点 - - 获取的值为 - - null；
- 属性节点 - - 获取到的是：属性的值；
- 文本节点 - - 获取到的是：文本内容；

节点的获取

1. 获取父节点

获取父级节点：obj.parentNode - - obj.parentNode.nodeType – 获取父节点的节点类型，如果该节点是标签返回 1，如上面所述的结果
获取父级元素：obj.parentElement - - 和 .parentNode 返回的结果是一样的；

2. 获取子节点

获取子节点：obj.childNodes ；包括文本（包括回车、换行等）、标签。返回的是一个节点数组，可以通过节点常用的属性来获取相关信息，比如nodeType 来获取判断节点类型；
获取子元素：obj.children ；获取是的结果只有标签数组；
获取第一个子节点： obj.firstChild ; 获取的是第一个子节点； - - IE8中是第一个子元素
获取第一个子元素： obj.firstElementChild; - - IE 8 中不支持
获取最后一个子节点： obj.lastChild; - - IE 8 中是最后一个子元素
获取最后一个子元素： obj.lastElementChild; - - IE 8 不支持
某个元素的前一个兄弟节点： obj.previousSibling; - - IE 8 中是前一个兄弟元素
某个元素的前一个兄弟元素： obj.previousElementSibling; - - IE 8 不支持
某元素的下一个兄弟节点：obj.nextSibling; - - IE 8 中是下一个兄弟元素
某元素的下一个兄弟元素： obj.nextElementSibling; - - IE 8 不支持

获取子节点的兼容方法

获取第一个子元素的兼容代码：

function getFirstChildElement(parentElement) {
	if(parentElement.firstElementChild != "undefined"){
		return parentElement.firstElementChild;
	}else {
		var node = element.firstChild;//第一个子节点
		while(node != undefined && node.nodeType != 1){
			node = node.nextSibling;
		}
		return node;
	}
}

获取最后一个子元素的兼容代码只需要将上面的first改成last，nextSibling改为previousSibling就可以了

艾文（Arvin）

发布了37 篇原创文章 · 获赞 15 · 访问量 3万+

私信关注

跟着艾文一起学前端-第15篇-JavaScript - DOM

DOM

概念