HTML DOM

0.096字数 292阅读 110

DOM

DOM(document object model)文档对象模型是定义和访问的HTML和 XML 的标准方法,HTML DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

节点树

节点树

使用 HTML DOM,树中的所有节点均可以利用 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
</head>
<body>
<!-- 我是注释-->
<div>
    <ul>
        <li style="color:#66afe9">张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>
</div>
</body>
</html>

HTML DOM 节点

  1. 整个文档是一个文档节点(如:html文件就是一个文档节点)
  2. 每个 HTML 元素是元素节点(如:<div>...</div>
  3. HTML 元素内的文本是文本节点(如:张三)
  4. 每个 HTML 属性是属性节点(如:style="color:#66afe9"
  5. 注释是注释节点(如:< ! -- 我是注释 -- >

节点父、子和同胞

  • <html> 节点没有父节点;它是根节点。
  • 元素节点:<head><body> 的父节点是 <html>节点,即文档节点:<html> 节点拥有两个子节点:<head><body>
  • 文本节点: 张三的父节点是<li> 节点
  • 4个<li>是同胞元素节点
  • <li style="color:#66afe9">张三</li><ul>的第一个子节点
  • <li >赵六</li><ul>的最后一个子节点
    `

推荐阅读更多精彩内容

  • DOM是什么 BOM中曾提到,浏览器在页面初始化时,会在内存创建一个全局对象,即window对象,用来描述当前窗口...
  • 警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
  • 最近在学习javascript关于DOM的一些知识,在这里对DOM做一些总结。 1.DOM简介 DOM是W3C的标...
  • 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型...
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...