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>

 

 

原文地址：http://www.cnblogs.com/x3449/p/16915288.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性