zoukankan      html  css  js  c++  java
  • DOM简介

    什么是DOM?

    DOM 是 Document Object Model(文档对象模型)的缩写。
    W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
    W3C DOM 标准被分为 3 个不同的部分:

    核心 DOM - 针对任何结构化文档的标准模型
    XML DOM - 针对 XML 文档的标准模型
    HTML DOM - 针对 HTML 文档的标准模型

    什么是 HTML DOM?

    HTML DOM 是:

    HTML 的标准对象模型
    HTML 的标准编程接口
    W3C 标准
    HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
    换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

    HTML DOM树

    HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。

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

    请看下面的 HTML 片段:

    <html>
      <head>
        <title>DOM 教程</title>
      </head>
      <body>
        <h1>DOM 第一课</h1>
        <p>Hello world!</p>
      </body>
    </html>
    

    从上面的 HTML 中:

    <html> 节点没有父节点;它是根节点
    <head><body> 的父节点是 <html> 节点
    文本节点 "Hello world!" 的父节点是 <p> 节点

    并且:

    <html> 节点拥有两个子节点:<head><body>
    <head> 节点拥有一个子节点:<title> 节点
    <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
    <h1><p> 节点是同胞节点,同时也是 <body> 的子节点

    并且:

    <head> 元素是 <html> 元素的首个子节点
    <body> 元素是 <html> 元素的最后一个子节点
    <h1> 元素是 <body> 元素的首个子节点
    <p> 元素是 <body> 元素的最后一个子节点

    方法&属性

    常见 DOM 对象方法

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

    一些常用的 HTML DOM 属性:

    innerHTML - 节点(元素)的文本值
    parentNode - 节点(元素)的父节点
    childNodes - 节点(元素)的子节点
    attributes - 节点(元素)的属性节点

    访问 HTML 元素(节点)

    访问 HTML 元素等同于访问节点
    您能够以不同的方式来访问 HTML 元素:
    通过使用 getElementById() 方法
    通过使用 getElementsByTagName() 方法
    通过使用 getElementsByClassName() 方法

    <!DOCTYPE html>
    <html>
      <body>
        <p>Hello World!</p>
    
        <div id="main">
        <p>DOM 很有用!</p>
        <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
        </div>
    
        <script>
        x=document.getElementById("main").getElementsByTagName("p");
        document.write("div 中的第一段的文本: " + x[0].innerHTML);
        </script>
    
      </body>
    </html>
    

    修改 HTML 元素

    修改 HTML DOM 意味着许多不同的方面:

    改变 HTML 内容
    改变 CSS 样式
    改变 HTML 属性
    创建新的 HTML 元素
    删除已有的 HTML 元素
    改变事件(处理程序)

    <!DOCTYPE html>
    <html>
    	<body>
    
          <p id="p1">Hello World!</p>
    
          <script>
          document.getElementById("p1").innerHTML="New text!";
          </script>
    
          <p>上面的段落被一段脚本改变了。</p>
    
    	</body>
    </html>
    

    添加、删除和替换 HTML 元素。

    <!DOCTYPE html>
    <html>
    	<body>
          <div id="div1">
              <p id="p1">This is a paragraph.</p>
              <p id="p2">This is another paragraph.</p>
          </div>
    
          <script>
          var para=document.createElement("p");
          var node=document.createTextNode("This is new.");
          para.appendChild(node);
    
          var element=document.getElementById("div1");
          element.appendChild(para);
          </script>
    	</body>
    </html>
    

    事件

    HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。
    HTML 事件的例子:

    当用户点击鼠标时
    当网页已加载时
    当图片已加载时
    当鼠标移动到元素上时
    当输入字段被改变时
    当 HTML 表单被提交时
    当用户触发按键时

    <!DOCTYPE html>
    <html>
    	<head>
    	</head>
    	<body>
    		<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
    		<button id="myBtn">试一试</button>
    
    		<script>
    		document.getElementById("myBtn").onclick=function(){displayDate()};
    		function displayDate()
    		{
    			document.getElementById("demo").innerHTML=Date();
    		}
    		</script>
    
    		<p id="demo"></p>
    
    	</body>
    </html>
    
  • 相关阅读:
    java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header.
    spring-session-data-redis依赖冲突问题
    centos7启动iptables时报Job for iptables.service failed because the control process exited with error cod
    图片上传后台服务报内存溢出 Out Of Memory Java heap space
    mysql 数据库密码忘记重置 进行远程连接
    打Jar包
    Type interface com.innovationV2.mapper.UserMapper is not known to the MapperRegistry
    关于java基础类型Integer String的clone()
    clion使用clang编译
    token & refresh token 机制总结
  • 原文地址:https://www.cnblogs.com/qcssmd/p/5522717.html
Copyright © 2011-2022 走看看