DOM----优快云博客

本文链接：https://blog.youkuaiyun.com/mmkyyy/article/details/142530274

DOM是W3C制定的一个规范(标准)，(Document Object Model，文档对象模型)，是提供了访问和操作网页中各元素的方法，让程序可以动态的修改或改变网页元素的内容、样式、结构。

1.DOM结构（倒树形结构）

HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)，树状结构叫节点树，结构树反映了各HTML元素之间的层次关系；DOM就通过这种树结构的层次关系，来定位、访问与控制文档中各元素及其内容

DOM按其内容可分为5个部分

核心DOM：可以同时操作HTML和XML两种文档的公共的属性和方法。；
XMLDOM：针对XML操作的接口，也是一些属性和方法
HTML DOM：HTML专用接口，也是一些属性和方法；
DOM事件模型：定义DOM能够响应的事件.比如：onclick、onload、onchange；

2.DOM的结构

HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)，树状结构叫节点树.结构树反映了各HTML元素之间的层次关系。DOM就通过这种树结构的层次关系，来定位、访问与控制文档中各元素及其内容。

3.DOM节点

根据 DOM，HTML 文档中的每个成分都是一个节点，HTML文档的节点类型有5个：

整个文档是一个文档节点，它对应的对象是document对象 9
每个 HTML 标签是一个元素节点 1 div=null
每一个 HTML 属性是一个属性节点 2 属性=属性值
包含在 HTML 元素中的文本是文本节点（它下面不能再有其它子节点） 3 #test=文本
注释属于注释节点 8

4.节点关系

节点彼此间都存在关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

除文档节点之外的每个节点都有父节点(parentNode)。父节点(parentNode)：当前节点的上一级元素；
大部分元素节点都有子节点。子节点(childNode)：当前节点的下一级元素（1层）；、

节点：元素节点，属性节点，文本节点

节点信息：节点类型，节点名称，节点值

5.获取节点信息：

1.元素节点的

获取节点类型

 console.log(a.nodeType);//1

获取节点名称

 console.log(a.nodeName); // A

获取节点值

 console.log(a.nodeValue); //null

2.属性节点的

获取节点类型

  console.log(shua.nodeType);//2

获取节点名称

console.log(shua.nodeName); // title

获取节点值

 console.log(shua.nodeValue); //百度一下

3.文本节点的

获取节点类型

console.log(wenbena.nodeType);//3

获取节点名称

 console.log(wenbena.nodeName); // #text

获取节点值

 console.log(wenbena.nodeValue); //百度 （文本本身）

6.获取元素节点(标签)

1.document.querySelector("a") 一个

console.log(document.querySelector("a"));

2.document.querySelectorAll("li") 多个

 var lis = document.querySelectorAll("li")
    console.log(lis);

3.document.getElementById("u") 通过id获取只能获取第一个

  console.log(document.getElementById("u"));

4.document.getElementsByClassName('box') 通过class获取得到的是一个数组

 console.log(document.getElementsByClassName('box'));

5.document.getElementsByName通过名称获取（input name）得到的是一个数组

 console.log(document.getElementsByName("pwd")[0]);

6.document.getElementsByTagName("div") 通过标签名获取得到的是一个数组

 console.log(document.getElementsByTagName("div")[0]);

7.获取属性节点

1.inp.attributes 得到的是节点默认返回所有属性，既可使用下标也可使用属性名返回的是一个键值对

 console.log(inp.attributes.id);

2.inp.getAttribute("id") 得到的是属性的值

 console.log(inp.getAttribute("id"));

3.得到的是节点默认返回所有属性，既可使用下标也可使用属性名返回的是一个键值对

 console.log(inp.getAttributeNode("id"));

8.获取文本节点

console.log(a.childNodes[0]);

9. 获取其他节点

1. .parentElement 获取父节点

2. .parentNode 获取父节点

 console.log(two.parentElement);
 console.log(two.parentNode);

3. 得到所有的子节点(包括文本节点，也就是空格和换行)

4. 得到所有的子节点(不包括文本节点)

console.log(ul.childNodes);
 console.log(ul.children);

5.获取第一个子元素(包括文本节点，也就是空格和换行)

6.获取第一个子元素(不包括文本节点)

 console.log(ul.firstChild);
console.log(ul.firstElementChild);

7.获取最后一个子元素(包括文本节点，也就是空格和换行)

8.获取最后一个子元素(不包括文本节点)

 console.log(ul.lastChild);
 console.log(ul.lastElementChild);

9.获取前一个子元素(包括文本节点，也就是空格和换行)

10.获取前一个子元素(不包括文本节点)

 console.log(two.previousSibling);
 console.log(two.previousElementSibling);

11.获取后一个子元素(包括文本节点，也就是空格和换行)

12.获取后一个子元素(不包括文本节点)

 console.log(two.nextSibling);
console.log(two.nextElementSibling);

13返回表单中所有的元素的数组

var form = document.querySelector("form")
    console.log(form.elements[1]);

10获取及设置元素节点对象属性

获取元素对象属性：
- 方法1：元素对象.属性名 [class需要使用className]，仅限于当前标签存在的属性，自定义不可以使用
- 方法2：元素对象.getAttribute('属性名')
- 方法3：元素对象.dataset.index【dataset是H5新增的属性】
设置元素对象属性：
- 方法1：元素对象.属性名='属性值'
- 方法2：元素对象.setAttribute('属性名','属性值')
- 方法3：元素对象.dataset.index = '01' （通过dataSet新增自定义属性，一般以data-开头的属性名，为程序员之间默认的格式，认为这是一个自定义属性）
- 元素对象.dataset.defaultColor
移除元素对象属性： removeAttribute("name")
- delete 元素对象.dataset.XXX