📜  HTML | DOM 块引用对象(1)

📅  最后修改于: 2023-12-03 15:01:12.403000             🧑  作者: Mango

HTML | DOM 块引用对象

在HTML和JavaScript中,块引用对象是指可以用于引用HTML元素或文档中某些文本的对象。HTML | DOM块引用对象定义了一组属性和方法,可以让开发者查询和操作HTML文档中的内容。

Document对象

Document对象表示当前HTML文档,它是HTML DOM中最基本的块引用对象。通过Document对象,可以获取HTML文档中任何元素以及文本节点。以下是Document对象上一些最常用的方法和属性:

// 获取文档的标题
document.title

// 获取文档中的所有元素
document.all

// 获取文档的根元素
document.documentElement

// 获取文档中的第一个元素
document.firstChild

// 获取文档中的最后一个元素
document.lastChild

// 查找文档中的元素
document.getElementById()

// 查找文档中的元素列表
document.getElementsByTagName()

// 查找文档中的元素列表
document.getElementsByClassName()

// 创建一个新的元素
document.createElement()

// 创建一个新的文本节点
document.createTextNode()

// 往文档中插入一个节点
document.appendChild()

// 从文档中移除一个节点
document.removeChild()

// 替换文档中的一个节点
document.replaceChild()

// 获取文档的URL
document.URL

// 获取文档的域名
document.domain

// 获取文档的cookie
document.cookie

// 获取文档的referrer
document.referrer
Element对象

Element对象代表HTML文档中的一个元素,可以使用它来查询和操作指定元素。以下是Element对象上一些最常用的方法和属性:

// 获取元素的标签名
element.tagName

// 获取元素的class属性
element.className

// 获取元素的id属性
element.id

// 获取元素的style属性
element.style

// 获取元素的title属性
element.title

// 获取元素的dataset属性
element.dataset

// 获取元素的innerHTML属性
element.innerHTML

// 获取元素的innerText属性
element.innerText

// 获取元素的outerHTML属性
element.outerHTML

// 获取元素的innerText属性
element.outerText

// 获取元素的文本节点
element.textContent

// 获取元素在文档中的位置
element.getBoundingClientRect()

// 获取元素的子元素列表
element.children

// 获取元素的父元素
element.parentNode

// 获取元素的下一个兄弟元素
element.nextElementSibling

// 获取元素的上一个兄弟元素
element.previousElementSibling

// 获取元素的属性值
element.getAttribute()

// 设置元素的属性值
element.setAttribute()

// 查找元素中的第一个子元素
element.firstElementChild

// 查找元素中的最后一个子元素
element.lastElementChild

// 查找元素中的第一个子节点
element.firstChild

// 查找元素中的最后一个子节点
element.lastChild

// 插入一个元素到当前元素的前面
element.insertBefore()

// 插入一个元素到当前元素的后面
element.insertAfter()

// 替换元素
element.replaceChild()

// 删除当前元素
element.remove()

// 删除当前元素的一个子元素
element.removeChild()

// 添加一个子元素
element.appendChild()
Text对象

Text对象表示一个文本节点,可以处理HTML文档中的纯文本内容。以下是Text对象上一些最常用的方法和属性:

// 获取文本节点的所有内容
textNode.textContent

// 获取文本节点的父元素
textNode.parentNode
Comment对象

Comment对象表示HTML文档中的注释。以下是Comment对象上一些最常用的方法和属性:

// 获取注释节点的内容
commentNode.textContent

// 获取注释节点的父元素
commentNode.parentNode

以上是HTML | DOM块引用对象的简单介绍和示例代码,希望对开发者的理解和使用有所帮助。