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>