DOM

Posted 2022-07-27 godfather-twq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的知识，希望对你有一定的参考价值。

一、DOM Tree

专门用来操作htnl页面内容的API，js的三个重要组成部分：ES(核心语法) DOM BOM

使用原生js完成某个内容

DOM W3C指定的标准

DOM：核心DOM 能够操作所有结构化文档（html，XML）万能复杂繁琐

HTML DOM 专门操作HTML内容的API 常用的API进行简化 -- 简单不是万能

实际开发中：先用简单，如果简单的不能解决问题、实现不了在用核心DOM补充

网页中一切在内存中都是以树形结构存储的存储上下级包含关系最直观的结构

HTML中的每一个元素：元素，属性，文本都是一个节点对象（Node） document对象是整棵树的根节点

节点对象（Node）三大属性

1、 nodeType number

9、document Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

1、element HTML 元素

2、attribute 属性

3、text 文本

2、nodeName 节点名字符串

document #document

elsement 全大写的标签名

attribute 属性名

进一步区分元素的名称时候用

3、nodeValue 节点值

document null

element null

attribute 属性值

text 文本的内容

二、节点

什么是节点呢？

根据DOM,XML文档中的每一个成分都是一个节点

整个文档是一个文档节点 document

标签是一个元素节点 document.getElementsByTagName(“body”) 这就是一个body节点

元素中的文本就是一个文本节点

每一个属性是一个属性节点

注释是一个注释节点

三、节点的获取

知道了什么是节点，那么我们要用节点来进行相关操作，比如找到一个<h1>标签我们要给他增加属性，属性值，内容等，那么我们首先需要先找到这一个节点。

同一个html页面内一个标签，属性，选择器可能存在多个，所以通过这些方式查找的内容通过一个类数组的方式放回，或者讲，只要有可能返回的是多个内容的可能，那么返回都是一个类数组来存这些内容，那么想要获得单个内容还得加上下标。

1、通过标签名称来找节点。

var arr = document.getElementByTagName(“标签名”)[*];

2、通过选择器获得节点

单个：var n = document.querySelector(“table>tbody tr:first-child>td:first-child”)

多个：var arr = document.querySelectorAll(“var n = document.querySelector(“table>tbody tr:first-child>td”)

”);

3、通过id来获得节点

var abc = document.getElementById(“id名”);

4、通过类名来查找节点

var arr = document.getElementsByClassName(“类名”);

5、通过name属性值来查找，一般不使用

var arr = document.getElementByName(“name的属性值”);

确定一个节点，通过关系查找其他节点

1、 三个元素不需要查找，直接获得

<html> document.documentElement html

<head>document.head head

<body>document.body body

2、 节点之间的关系 node代表的是已经确定的节点对象

1） 父子关系

node.parentNode 获得node的父节点

var tbody = document.getElementsByTagName("tr")[0].parentNode;

node. childNodes 获得node的所有子节点

var td = document.getElementsByTagName("tr")[0].childNodes;

node.firstChild 获得node下的第一个子节点

node.lastChild 后的node下最后一个子节点

2）兄弟关系

node.preivousSibling: 返回当前节点的前一个兄弟节点

var tr0 = document.getElementsByTagName("tr")[1].preivousSibling;

node.nextSibling:返回当前节点的下一个兄弟节点

var tr2 = document.getElementsByTagName("tr")[1].nextSibling;

问题：网页中的一切都是节点，包括换行和空字符

3、 用元素树:仅包含元素节点的树结构 ---不是一颗新树 ，仅是节点数的子集

elem代表的是已经确定的节点

1）父子关系

elem.parentElement 返回一个父元素对象（父节点）

var tr = document.getElementsByTagName("tr")[0];

var father = tr.parentElement;

elem.childen IE8支持 返回子元素对象集合

elem.firstElementChild 返回第一个子元素对象

elem.lastElementChild 返回最后一个子元素

2）兄弟关系

返回当前节点的前一个兄弟元素

elem.preivousElementSibling

返回当前节点的下一个兄弟元素

elem.nextElementSibling

问题：IE9+支持

四、获得节点中的内容

1、双标签中的内容增，删，改，查

a)、查

var abc = node.innerHTML

b)、改

node.innerHTML = “想要在标签中显示的内容”;

c)、删

node.innerHTML =””;为空就是把标签中的内内容全给删完

d)、增

node.innerHTML =node.innerHTML +”想要增加的内容”; 添加原有的内容的后面

2、单标签的内容增、删、改、查单标签内容一般存在value值里

a) 、查

var abc = node.value;

b)、改

node.value = “修改的内容”;

c)、删

node.value = “” value的属性值为空就删除了value这个属性值

d)、增

node.value = node.value+“增加的内容”;添加在原有的属性值后面

3、属性的增，删，改，查

a)、查查的是属性值

var abc = node.getAttribute(“属性名”)

var abc = node.属性名

var abc = document.getElementsByTagName("input")[0].value;

b)、改

node.属性名 = “要修改的内容”;

node. setAttribute("原有属性","更改的属性值");

c)、删

1、node.属性名 = “” 只删掉属性值

2、node.RemoveAttribute("要删除的属性"); 这样会把属性名和属性值一起删掉

3、node.RemoveAllAttributes(); 移除当前节点的所有属性和属性值

4、node. setAttribute("原有属性","");

d)、增

node.要添加的属性名=“要添加的属性值”

以上是关于DOM的主要内容，如果未能解决你的问题，请参考以下文章

React虚拟dom中的key值

DOM事件： DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件

虚拟DOM（Virtual Dom） VS 影子DOM（Shadow Dom）

虚拟DOM（Virtual DOM）

关于DOM级别的一些问题，DOM0，DOM1，DOM2

DOM事件类