HTML DOM详解

来源：互联网发布：姚明10-11赛季数据编辑：程序博客网时间：2024/06/06 00:53

因为，核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM

1、HTMLDOM的新特性

每一个HTML标记，都对应一个对象。如：<img>标记，就是一个img对象。
每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
<img>属性：src、width、height、border、style、title、id、class等。
在JS中，img对象属性：src、width、height、border、style、title、id、className等。

2、HTML DOM访问HTML元素的方法

（1）根据元素的id查找对象——document.getElementById(id)

(2) 根据HTML标签名找对象
描述：根据HTML标签名找对象
语法：var arr = parentNode.getElementsByTagName(tagName)
参数：
tagName就是要查找的标签名称，不能带尖括号。
parentNode代表上层节点。
返回值：返回一个对象数组。
举例：ulObj.getElementsByTagName(“li”)

<html><head><title>节点访问</title>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />   <meta name="author" content="" />   <meta name="keywords" content="" />   <meta name="description" content="" />   <style type="text/css">   </style>     <script type="text/javascript">      window.onload= function(){        var imgObj = document.getElementById("img");        imgObj.src="001.jpeg";        imgObj.width="300";        imgObj.border="1";        imgObj.style="padding:10px;background:red;margin-top:10px;margin-left:100px";                imgObj.onclick=show;              }     function show(){      var ulObj = document.getElementById("ul1");      //获取所有的元素      var lisObj = ulObj.getElementsByTagName("li");      for (var i = 0; i < lisObj.length; i++) {        // alert(lisObj[i].innerHTML);//双标签用innerHTML 单标签用Value        lisObj[i].innerHTML = lisObj[i].innerHTML+i;        lisObj[i].style="color:blue";      }     }    function test(obj){      alert(obj.value);    }   </script></head><body ><img id="img" src=""><ul id="ul1">  <li>北京</li>  <li>上海</li>  <li>广州</li>  <li>深圳</li></ul><input type="button" name="开关" value="测试" onclick="test(this)"></body></html>

3.元素对象

tagName：与nodeName功能一样。

className：与class属性功能一样。

innerHTML：设置或读取某个标记中的所有内容，包括HTML文本。只能用于双边标记。

nodeValue：指纯文本。

offsetWidth：指元素的可见宽度，不含滚动条中的内容。只读属性。不带px单位。

offsetHeight：指元素的可见高度，不含滚动条中的内容。只读属性。不带px单位。

scrollWidth：指元素的总宽度，包含滚动条中的内容。只读属性。不带px单位。

scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。

scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。

如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。

scrollLeft：与scrollTop描述一样，只是向左滚动的距离。

阅读全文

0 0