ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

DOM概念和Document文档对象

2022-08-05 14:00:08  阅读:135  来源: 互联网

标签:document 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>

运行结果

标签:document,DOM,对象,元素,文档,Document,属性
来源: https://www.cnblogs.com/aimz01/p/16553977.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有