JavaScript DOM

JavaScript DOM 笔记

1DOM 介绍

**MDN 文档对象模型手册：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

1）DOM 英文全程"Document Object Model" , 即：“文档对象模型”.

2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式.

2 Node 节点

2.1 五大节点类型

document	文档节点  nodeType:9
element		元素节点  nodeType:1	nodeName 获取元素的标签名
attribute	属性节点  nodeType:2	
text		文本节点  nodeType:3	
comment		注释节点  nodeType:8

2.2 节点的属性

nodeName		获取节点的名字
nodeValue		获取节点的值
nodeType		获取节点的类型，用数字表示

3 获取元素

① 通过ID 名

document.getElementById("ID名")

总结：

1. 方法返回一个元素对象
2. 如果没有满足条件的元素返回null .

② 通过标签名

//从文档中获取
document.getElementsByTagName("标签名");

//从元素的后代中获取
element.getElementsByTagName("标签名");

总结：

1. 方法返回一个HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
2. 如果没有满足条件的元素，返回空的集合。

③ 通过类名（了解，IE8 + 支持）

// 从文档中获取
document.getElementByClassName('类名');

// 从元素的后代中获取
element.getElementsByClassName('类名');

总结：

​ 1.方法返回一个HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是 元素对象。

​ 2. 如果没有满足条件的元素，返回空的集合。

④ 通过name属性值（了解）

//从文档中获取
document.getElementsByName("name属性的值");

总结：

​ 1.方法返回一个 NodeList 类型的对象，与 HTMLCollection 相似，也是伪数组，里面 的元素是元素对象。

​ 2. 如果没有满足条件的元素，返回空的集合。

⑤ 使用选择器获取元素（推荐）

// 从文档中获取
document.querySelector('选择器')；
document.querySelectorAll('选择器');

// 从元素的后代中获取
element.querySelector('选择器');
element.querySelectorAll('选择器');

总结：

1. querySelector() 方法返回一个元素对象，如果满足条件的元素有多个只取第一个，如果没有满足条件的元素返回null。
2. querySelectorAll() 方法返回NodeList 集合，如果没有满足条件的元素的返回集合。

⑥ 获取所有的元素

document.all

总结：获取文档中的所有元素，是个HTMLCollection 类型的集合

注意：使用document .all 可以判断IE 还是 非IE ，这是一个语法糖

if (document.all) {
document.write('我是IE浏览器！');
} else {
document.write('我不是IE');
}

4 文档结构（元素关系）

4.1 节点树

childNodes		获取所有子节点的集合，是个 NodeList 类型的对象
firstChild		获取第一个子节点
lastChild		获取最后一个子节点

previousSibling	 获取紧邻在前面的兄弟节点
nextSibling		 获取紧邻在后面的兄弟节点

parentNode		 获取父节点

4.2 元素树

children 				获取所有子元素的集合，是个HTMLCollection 类型的数据
firstElementChild		获取第一个子元素
lastElementChild		获取最后一个子元素

previousElementSibling	获取紧邻在前面的兄弟元素
nextElementSibling		获取紧邻在后面的兄弟元素

parentElement			获取父元素

6 元素的属性操作

6.1 读写内置属性

元素.属性名;

6.2 读写自定义属性

元素.getAttribute("属性名")			读取属性的值，如果不存在该属性返回 null
元素.setAttribute("属性名","值")		设置属性的值，如果属性不存在会添加该属性

注意：

1. getAttribute() 和 setAttribute() 可以操作写在标签上的所有属性，不论内置的还是自定义的。
2. 如果要操作的属性是内置，使用.属性名的方式；如果要操作的属性是自定义的再使用getAttribute() 和 setAttribute()。

6.3 data-*形式的自定义属性

HTML5标准建议标签中的自定义属性都是data-message、data-group-name这样的形式，此种形式的自定义属性，DOM 提供了快捷的操作方式：

元素.dataset.属性名;    //可读可写

imgEle.dataset.message;		//对应的是 data-message 属性
imgEle.dataset.groupName;	//对应的是 data-group-name	属性