DOM概念和Document文档对象

DOM概念

概念:Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分 封装为对象 可以使用这些对象 对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
    • Document:文档对象
    • Element:元素对象
    • Attribute:属性对象
    • Text:文本对象
    • Comment:注释对象
    • Node:节点对象 其他5个的父对象
  • XML DOM - 针对XML文档的标准模型
  • HTML DOM - 针对HTML文档的标准模型

核心DOM模型：

  • Document:文档对象
  • Element:元素对象
  • Node:节点对象 其他5个的父类对象

 Document文档对象

1.创建 

  • Window.document
  • document

2.方法

  • 获取Element对象
    • getElementById():根据id属性值获取元素对象 id属性值一般唯一
    • getElementsByTagName():根据元素名称获取元素对象们 返回值是一个数组
    • getElementsByClassName():根据Class属性值获取元素对象们 返回值是一个数组
    • getElementsByName():根据name属性值获取元素对象们 返回值是一个数组
  • 创建其他DOM对象
    • createAttribute(name)
    • createComment()
    • createElement()
    • createTexNode()

3.属性

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        
        <div id="div3">div3</div>
        
        <div class="cls1">div4</div>
        <div class="cls1">div5</div>
    
        <input type="text" name="username">
        
        <script>
            //getElementById():根据id属性值获取元素对象 id属性值一般唯一
            var divs1=document.getElementById("div1");
            alert(div1)
            
            //getElementsByTagName():根据元素名称获取元素对象们 返回值是一个数组
            var divs2 = document.getElementsByTagName("div");
            alert(divs2.length)
            
            //getElementsByClassName():根据Class属性值获取元素对象们 返回值是一个数组
            var divs3=document.getElementsByClassName("cls1");
            alert(divs3.length)
            
            //getElementsByName():根据name属性值获取元素对象们 返回值是一个数组
            var divs4=document.getElementsByName("username");
            alert(divs4)
            
        </script>
    </body>
</html>

运行结果

posted @ 2022-08-05 13:55  baimingze  阅读(61)  评论(0)    收藏  举报