JavaScript Dom知识点

最新推荐文章于 2024-07-19 12:58:53 发布

驴驴。

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Hfffs/article/details/120127615

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM

DOM是JS操作网页的编程接口，全称为文档对象模型
作用：将网页转为一个JS对象。
文档：文档表示的就是整个的HTML网页文档
对象：对象表示将网页中的每一个部分都转换为了一个对象。
模型：使用模型来表示对象之间的关系，这样方便我们获取对象
文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。

1.节点层级

a.

任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
元素节点表示 HTML 元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。

b.节点

DOM的最小组成单位叫做节点（node）。
节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。
常用节点：
文档节点（document）
整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。
元素节点（Element）
HTML文档中的HTML标签。
属性节点（Attribute)
元素的属性表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
文本节点（Text）
HTML标签中的文本内容。
其他节点
DocumentType
doctype标签（比如`<!DOCTYPE html>`）。
Comment
注释
DocumentFragment
文档的片段
这七种节点都属于浏览器原生提供的节点对象(下面要讲的Node对象)的派生对象，具有一些共同的属性和方法。

c.节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。
顶层的节点:document节点
文档里面最高的HTML标签:<html>,它构成树结构的根节点（root node）,其他HTML标签节点都是它的下级
- 父节点关系（parentNode）：直接的那个上级节点。
- 子节点关系（childNode）：直接的下级节点。
- 同级节点关系（sibling）：拥有同一父节点的节点。

2.Node类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。
Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。
在 JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。

a.属性

## nodeType
nodeType属性返回一个整数值，表示节点的类型
## nodeName
nodeName属性返回节点的名称
## nodeValue
nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.
## textContent
textContent属性返回当前节点和它的所有后代节点的文本内容
## nextSibling
nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null
## previousSibling
previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null
## parentNode
parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：
元素节点(element)、文档节点(document)和文档片段节点(documentfragment)
## parentElement
parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null
## firstChild和lastChild
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。
## childNodes
childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点
我们还可以使用for循环来遍历某个节点的所有子节点

b.方法

## appendChild
作为最后一个子节点，插入当前节点。
在节点的子节点列表末添加新的子节点
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容设置内容
p.innerHTML = '我是一个p标签';
//设置样式
p.style.color='red';
// 将节点插入到body中
document.body.appendChild(p);
</script>
## insertBefore()
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
第一个参数：要插入的节点newNode
第二个参数：父节点parentNode内部的一个子节点referenceNode
第一个参数放在第二个参数前面。
## removeChild()
移除该节点
## replaceChild()
新节点替换某一个节点
var replacedNode = parentNode.replaceChild(newChild, oldChild); 将oldChild替换成newChild

c.其他方法

## cloneNode()
方法返回调用该方法的节点的一个副本.
var dupNode = node.cloneNode(deep);
node
将要被克隆的节点
dupNode
克隆生成的副本节点
deep 可选
是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

3.Document类型

a.属性

## documentElement
始终指向HTML页面中的<html>元素。
## body
直接指向<body>元素
## doctype
访问<!DOCTYPE>, 浏览器支持不一致，很少使用
## title
获取文档的标题
## URL
取得完整的URL
## domain
取得域名，并且可以进行设置，在跨域访问中经常会用到。
## referrer
取得链接到当前页面的那个页面的URL，即来源页面的URL。
## images
获取所有的img对象，返回HTMLCollection类数组对象
## forms
获取所有的form对象，返回HTMLCollection类数组对象
## links
获取文档中所有带href属性的<a>元素

b.DOM编程界面

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
## getElementById 方法
访问 HTML 元素
## innerHTML 属性
获取元素内容

c.查找元素

## document.getElementById(id)
通过元素 id 来查找元素
## document.getElementsByTagName(name)
通过标签名来查找元素
## document.getElementsByClassName(name)
通过类名来查找元素
## document.querySelector()
返回文档中匹配指定的CSS选择器的第一元素
## document.querySelectorAll()
HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

d.添加元素

document.createElement(*element*)
创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容样式
p.innerHTML = '我是一个p标签';
p.style.color='red';
// 将节点插入到body中
document.body.appendChild(p);
</script>

e.写入

document.write()
向文档写入文本或 HTML 表达式或 JavaScript 代码。

4.Element类型

a.属性

attributes：返回一个与该元素相关的所有属性的集合。
classList：返回该元素包含的 class 属性的集合。
className：获取或设置指定元素的 class 属性的值。
clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientTop：返回该元素距离它上边界的高度。
clientLeft：返回该元素距离它左边界的宽度。
clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
innerHTML：设置或获取 HTML 语法表示的元素的后代。
tagName：返回当前元素的标签名。

b.常用方法

element.innerHTML = new html content
改变元素的 innerHTML
element.attribute = value
修改属性的值element.getAttribute()返回元素节点的指定属性值。
element.setAttribute(attribute, value)
设置或改变 HTML 元素的属性值
element.style.property = new style
改变 HTML 元素的样式

5.Text类型

a.属性及方法

## length
文本长度
## appendData(text)
追加文本
## deleteData(beginIndex,count)
删除文本
## insertData(beginIndex,text)
插入文本
## replaceData(beginIndex,count,text)
替换文本
## splitText(beginIndex)
从beginIndex位置将当前文本节点分成两个文本节点
## document.createTextNode(text)
创建文本节点，参数为要插入节点中的文本
## substringData(beginIndex,count)
从beginIndex开始提取count个子字符串

驴驴。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Dom知识点

DOMDOM是JS操作网页的编程接口，全称为文档对象模型作用：将网页转为一个JS对象。文档：文档表示的就是整个的HTML网页文档对象：对象表示将网页中的每一个部分都转换为了一个对象。模型：使用模型来表示对象之间的关系，这样方便我们获取对象文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。1.节点层级a.任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的
复制链接

扫一扫