DOM分类及HTML DOM

2019-07-16

DOM分类及HTML DOM

DOM简介


 DOM是W3C(World Wide Web Consortium)标准。

“W3C 文档对象模型(DOM,全称Document Object Model)”是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。

DOM被分为3个不同的部分/级别:

  • 核心 DOM
  • XML DOM
  • HTML DOM

核心DOM:提供了操作文档的公有属性和方法,就相当于鼻祖。

HTML DOM:提供了所有HTML元素的对象和属性,以及访问方法,相当于对核心DOM进行了在HTML方面的拓展

XML DOM:提供了所有XML元素的对象和属性,以及访问方法,与HTML DOM类似。

 

HTML DOM


 节点概念

 HTML DOM 把所有的元素全部转化为节点对象,以后要想操作HTML里的内容就等于操作节点。

节点分类

  • 文档节点[object HTMLDocument]
  • 元素节点[object HTMLXXXElement]
  • 属性节点[object Attr]
  • 内容节点[object Text]

1、文档节点就是根,只存在一个,想要得到它十分容易,写一个 document 相当于文档节点了。

<script>
    document.write(document);
</script>

渲染结果
技术图片

2、元素节点:文档节点是根,所以他肯定有许多小弟了,比如 div 、p等等,都是元素节点,属于文档节点的下级。

3、属性和内容节点:id就是div的一个属性节点的节点名,“HTML DOM”就是div内容节点的节点值,节点名和节点值就是节点的属性之一。

<div id="div1">HTML DOM</div>

 

获取节点


 

获取元素节点

现在已经知道HTML DOM是由节点构成,那我们又如何获取节点呢。

  • document.getElementById       通过id获取元素节点 
  • getElementsByTagName       通过标签名称获取元素节点
  • getElementsByClassName         通过类名获取元素节点
  • getElementsByName                  通过表单元素的name获取元素节点

因为id是唯一的,所以上面除了通过id获取元素节点外,其他获取到的都是节点数组。

例如:

<!--id获取到是单个元素-->
<div id="div1" >
    HTML DOM
</div>

<script>
    var  div1 = document.getElementById("div1");
   document.write(div1);
</script>

渲染结果
技术图片
<!--其他获取到的是元素数组-->
<div id="div1" >
    HTML DOM
</div>

<script>
    var divs = document.getElementsByTagName("div");
    var div1 = divs[0];
</script>

渲染结果
技术图片

遍历元素数组,根据javascript的知识,数组有个属性length,因此我们可以使用for循环遍历他

<!--其他获取到的是元素数组-->
<script>
    var element = document.getElementsByTagName("xxx");
    for(var i = 0; i < element.length; i++){
        document.write(element[i]);
    }
</script>

 

获取属性节点

首先需要获取到元素节点,然后可以通过attributes获取元素节点的属性节点,属性可以有多个,所以获取到是属性节点数组。

若要获取某一指定的属性的节点例如id,可以通过键名xx["id"]获取到属性节点。

<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
    var  div1 = document.getElementById("d1");
    var as = div1.attributes;
    document.write("div总共有"+as.length +" 个属性");
    document.write("分别是:");
    for(i = 0; i< as.length; i++){
        document.write("<br>");
        document.write(as[i].nodeName);
        document.write(":");
        document.write(as[i].nodeValue);
    }
    document.write("<br>");
    document.write("div的id属性值是:"+ as["id"].nodeValue);
</script>

渲染结果
技术图片

 

获取内容节点

通过childNodes获取到的第一个子节点就是内容节点

<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
    var  div1 = document.getElementById("d1");
    var content = div1.childNodes[0];
    document.write("div的内容节点名是:"+content.nodeName);
    document.write("<br>");
    document.write("div的内容节点值是:"+content.nodeValue);
</script>

渲染结果
技术图片

 

节点的属性


 

  • nodeName    节点名称
  • nodeValue     节点值
  • nodeType      节点类型
  • innerHTML    元素节点的文本信息
  • 元素节点的属性,可直接访问
    • id  
    • value  
    • className  
<div id="div1" class="d">
    愿用一生守护你
</div>
<hr>
<script>
    function w(s){
        document.write(s);
    }

    //元素节点
    var div1 = document.getElementById("div1");
    //属性节点数组
    var attrs = div1.attributes;
    //遍历属性节点
    for(var i = 0; i < attrs.length; i++){
        //节点名
        w(attrs[i].nodeName);
        w(" : ");
        //节点值
        w(attrs[i].nodeValue);
        w("<br>");
    }

    //获取内容节点的节点值
    var value = div1.childNodes[0].nodeValue;
    w(value);
    w("<br>");
    //获取内容节点太复杂了,简化一点
    var singleValue = div1.innerHTML;
    w(singleValue);
    w("<br>");

    //直接访问内置的属性
    w(div1.id);
    w("<br>");
    w(div1.className);
</script>

渲染结果
技术图片

 

DOM分类及HTML DOM

DOM分类及HTML DOM

原文地址:https://www.cnblogs.com/hemou/p/11192820.html