首页 > 其他分享 >DOM_概述与DOM_Document对象_创建DOM对象

DOM_概述与DOM_Document对象_创建DOM对象

时间:2022-11-22 15:46:51浏览次数:48  
标签:DOM 对象 JavaScript HTML 文档 Document

DOM_概述

   Document object model:文档对象模型 

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

 

   HTML  DOM树 

    

 

 

 

     html与dom树的关系

通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

 什么是DOM

    

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

  • Core DOM - 所有文档类型的标准模型
    • Document :文档对象
    • Element :元秦对象
    • Attribute :属性对象
    • Text:文本对象
    • Comment:注释对象
    • Node:节点对象,其他5个父对象
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

核心DOM模型: 

  • Document :文档对象
  • Element :元秦对象

 

DOM_Document对象_创建DOM对象

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</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>
    /*
    Document:文档对象
        1. 创建(获取):在html dom模型中可以使用window对象来获取
            1. window.document
            2. document
        2. 方法:
            1. 获取Element对象:
                1. getElementById()    : 根据id属性值获取元素对象。id属性值一般唯一
                2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
                3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
            2. 创建其他DOM对象:
                createAttribute(name)
                createComment()
                createElement()
                createTextNode()
        3. 属性



     */

    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);
    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
    // alert(div_cls.length);
    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);


    var table = document.createElement("table");
    alert(table);



</script>
</body>
</html>

 

 

标签:DOM,对象,JavaScript,HTML,文档,Document
From: https://www.cnblogs.com/x3449/p/16915288.html

相关文章

  • 20221121-Python-对象的方法
    1.对象方法的概念:               ......
  • window对象和document对象
    window对象1.对象属性1.窗口自身2.window.self引用本窗口3.window.name窗口命名4.window.defaultStatus设定窗口状态栏信息5.window.locationURL地址,配......
  • 用Spring工厂实例化对象
    如何导入spring相关包,以及基本的配置及应用spring工厂spring的作用有多大,它代表的不仅仅是spring框架本身,在前辈的更新下,已经能无脑支持structs,mybatis,hibernate等各种......
  • python中urllib.request对象案例
    刚刚接触爬虫,基础的东西得时时回顾才行,这么全面的帖子无论如何也得厚着脸皮转过来啊!什么是Urllib库?urllib库是 ​​Python​​ 内置的HTTP请求库。urllib模块提供......
  • document.querySelector()用法
    不久前,我发现了document.querySelectorJS选择器,语法类似JQuery。通过元素id获取元素<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <......
  • 2022 - 11.22 对象深拷贝
    第一步:获取对象的类型方法exportconstgetObjType=(obj)=>{vartoString=Object.prototype.toString;varmap={'[objectBoolean]':'boolean',......
  • 数组,对象解构
    数组解构varnames=["abc","cba",undefined,"nba","mba"]基本使用var[name1,name2,name3]=names顺序问题:严格的顺序var[name1,,nam......
  • 008.初始化IoC容器(基于XML配置Bean 基于工厂实例化对象,工厂实例方法)05
    1. 工厂实例方法创建对象是指Ioc容器对工厂类进行实例化,并调用对应的实例方法创建对象的过程2. src/main/java/com/imooc/spring/ioc/factory/AppleFactoryInstance.ja......
  • 007.初始化IoC容器(基于XML配置Bean 基于工厂实例化对象,静态方法)05
    1.工厂模式就是指隐藏创建类的细节,通过一个额外的工厂类来组织创建我们需要的对象,工厂按表现形式又分为静态工厂和工厂实例2.  src/main/java/com/imooc/spring/ioc/fa......
  • 面向对象综合应用--烤地瓜
    1、需求需求主线:1.被烤的时间和对应的地瓜状态:0-3分钟:生的3-5分钟:半生不熟5-8分钟:熟了超过8分钟:烤......