HTML DOM详解

最新推荐文章于 2022-08-25 18:57:12 发布

jlhaoran

最新推荐文章于 2022-08-25 18:57:12 发布

阅读量547

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/haoranli/article/details/73381566

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

因为，核心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.οnlοad= 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.οnclick=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="测试" οnclick="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描述一样，只是向左滚动的距离。

jlhaoran

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM详解

因为，核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM1、HTMLDOM的新特性每一个HTML标记，都对应一个对象。如：标记，就是一个img对象。每一个HTML标记的属性，与对应的元素对象的属性，一一对应。属性：src、width、height、border、style、title、id、class等。
复制链接

扫一扫