zoukankan      html  css  js  c++  java
  • html dom模型一

    DOM 节点

    包含的节点内容:

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

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

    DOM 处理中的常见错误是希望元素节点包含文本。

    在本例中:<title>DOM 教程</title>,元素节点 <title>,包含值为 "DOM 教程" 的文本节点

    可通过节点的 innerHTML 属性来访问文本节点的值。

    1:HTML DOM 常用方法方法

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

    2:HTML 的属性:

      innerHTML

    <html>
    <body>
    
    <p id="intro">Hello World!</p>
    
    <script>
    var txt=document.getElementById("intro").innerHTML;
    document.write(txt);
    </script>
    
    </body>
    </html>

    nodeName 属性:

       nodeName 属性规定节点的名称

    nodeValue 属性

       nodeValue 属性规定节点的值。

    nodeType 属性

       nodeType 属性返回节点的类型

    元素类型NodeType
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

    3:HTML DOM 访问:

    • 通过使用 getElementsByTagName() 方法
    • 通过使用 getElementsByClassName() 方法
    •  通过使用 getElementById() 方法

         

    <!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>
    <!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>

    4:修改html dom

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

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

    5:HTML DOM - 元素

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

    6:HTML DOM - 事件

  • 相关阅读:
    一个好的时间函数
    Codeforces 785E. Anton and Permutation
    Codeforces 785 D. Anton and School
    Codeforces 510 E. Fox And Dinner
    Codeforces 242 E. XOR on Segment
    Codeforces 629 E. Famil Door and Roads
    Codeforces 600E. Lomsat gelral(Dsu on tree学习)
    Codeforces 438D The Child and Sequence
    Codeforces 729E Subordinates
    【ATcoder】D
  • 原文地址:https://www.cnblogs.com/yujian-bcq/p/3606473.html
Copyright © 2011-2022 走看看