HTML DOM 定义了访问和操作 HTML 文档的标准。
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
DOM 是 Document Object Model（文档对象模型）的缩写。
什么是 XML DOM？
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？
HTML DOM 是：
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
HTML DOM 节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
DOM Nodes
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
HTML DOM 树实例
以下是文档标签代码了解一下
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" name="btn" id="btn" value="点击" > <div id="div"> 这是div </div> <div id="div1"> 这是div1 </div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul> <span class="sp"> 这是span标签 </span> <p class="sp"></p> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ //通过标签的id获取元素 // var div=document.getElementById("div") // div.innerHTML="更改后的div" // var div1=document.getElementById("div1") // div1.innerHTML="更改后的div1" //通过标签名来获取标签 var divs=document.getElementsByTagName("div") //document.write(divs) for(var i=0;i<divs.length;i++){ document.write(divs[i]) divs[i].innerHTML="更改后的div" } var ul=document.getElementsByTagName("ul")[0] document.write(ul) //获取到所有的属性class的值使sp的标签 var els=document.getElementsByClassName("sp") document.write(els) //通过name属性来获取标签 var uname=document.getElementsByName("uname") document.write(uname[0]) //通过选择器名称来获取，只能获取第一个 var queryS=document.querySelector(".sp") document.write(queryS) //通过对应的选择器获取所有满足条件的标签 var queryAll=document.querySelector(".sp") document.write(queryAll) //通过标签的id属性的值获取标签 document.write(div1) document.write(document.body) } </script> </body> </html>今天的学习就分享到这里！
本文含有隐藏内容，请 开通VIP 后查看