DOM初识

joker-King

于 2019-12-10 22:52:27 发布

阅读量168

点赞数

分类专栏： js入门

本文链接：https://blog.csdn.net/qq_41826758/article/details/103483541

版权

6 篇文章 0 订阅

订阅专栏

Dom对象

在html中，我们经常需要对页面元素进行操作，为了简单方便的获取页面元素，人们给html文档定义了一个层次结构。当一个HTML文档在浏览器中打开，浏览器就会产生一颗相应的html文档结构树。

这个html文档结构树被称为DOM（文档对象模型）。DOM定义了访问HTML文档的标准。关于DOM，需要了解以下几点：
**1）**DOM是Document Object Model的缩写。

**2）**DOM是一组用来描述脚本怎么与结构化文档进行交互和访问的web标准。

**3）**DOM定义了一系列对象、方法和属性，可以通过JavaScript访问、操作和创建文档中的内容、结构、样式以及行为。

**4）**DOM可以说就是为了获得对象而存在的。
在这里插入图片描述
文档节点树中的节点彼此也拥有层级关系。我们用父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞，它们的关系如下：

1）<html>元素没有父节点，它是根节点

2）<head>和<body>的父节点是<html>节点，<head>与<body>是同胞节点

3）文档节点“张三”的父节点是<strong>节点

4）<head> 元素是 <html> 元素的首个子节点

5）<body> 元素是 <html> 元素的最后一个子节点

html文档中每一个元素都是一个节点，其中标签节点（例如html，body，head，p）被称为元素节点，而文档中的文本被称为文本节点，元素的属性（例如value属性，name属性）被称为属性节点。

在Dom文档节点树中：
**1）**nodeName
节点名称，相当于tagName，元素节点返回节点名，属性节点返回属性名，文本节点返回#text。nodeName，是只读的。

**2）**nodeType
返回值：元素节点；属性节点；文本节点。nodeType是只读的。

**3）**nodeValue
返回一个字符串，指示这个节点的值。元素节点返回null，属性节点返回属性值，文本节点返回文本。nodeValue可读可写。一般只用于设置文本节点的值。

1）

节点	ParentNode	childNodes	firstChild	lastChild	previousSibling	nextSibling	attribute
节点描述	父节点	所有的直接子节点	第一个直接子节点	最后一个直接子节点	上一个兄弟节点	下一个兄弟节点	元素的属性的集合

2）

方法	描述
getElementById()	返回带有指定 ID 的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

3）
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。
实例：获取文档中 id=“demo” 的元素
document.querySelector("#demo");
删除线格式

实例：获取文档中 class=“example” 的第一个元素
document.querySelector(".example");
实例：获取文档中有 “target” 属性的第一个<a>元素
document.querySelector(“a[target]”);
实例：获取文档中 <h1> 或 <h2> 第一个匹配到的元素（多选择器用逗号”，“隔开）
document.querySelector(“h1, h3”);
实例：获取文档中一个class属性为"user-panel main"的div元素内包含一个name属性为"login"的input元素
document.querySelector(“div.user-panel.main input[name=‘login’]”);

关注