DOM基础

最新推荐文章于 2024-08-30 11:13:00 发布

susu09new

最新推荐文章于 2024-08-30 11:13:00 发布

阅读量574

点赞数

分类专栏： JS 文章标签： JS dom

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML DOM 定义了访问和操作 HTML 文档的标准。

“W3C 文档对象模型（DOM Document Object Model）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

方法是我们可以在节点（HTML 元素）上执行的动作。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

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

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document

改变 HTML 样式

document.getElementById("p2").style.color="red";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

事件

(http://www.w3school.com.cn/htmldom/dom_events.asp)

onclick
    document.getElementById("myBtn").οnclick=function(){displayDate()};

onload
    <body οnlοad="checkCookies()">
onchange
    <input type="text" id="fname" οnchange="myFunction()">
onmouseover="mOver(this)" 
οnmοuseοut="mOut(this)" 
οnmοusedοwn="mDown(this)" 
οnmοuseup="mUp(this)"