CSS的Dom对象详解

 2023-03-16 20:31:43  阅读 0

一、什么是DOM

DOM:说的通俗易懂一些其实就是文档对象的模型。是用来规范文档内容的手段。

例如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试</title>
  </head>
  <body>
    <a href="#">链接</a>
    <p>段落...</p>
  </body>
</html>

那么什么是Dom节点树那?

如上图所示就是我们常说的DOM节点树

二、DOM对象的继承关系

其实就是再JavaScript中我们想对网页中的元素进行操作,那么我们就可以利用document对象其中的getElementById()方法实现,不过这样也有一个坏处就是此方法的返回值类型是什么我们需要去了解

下面通过代码进行查看。

<div id="test"></div>
<script>
  var test = document.getElementById('test');
  console.log(test);  	      // 输出结果:<div id="test"></div>
  console.log(test.__proto__);   // 输出结果:HTMLDivElement { …… }
</script>

Dom对象也是存在这继承关系的。

我们再html初级学习阶段应该了解过document和Element其实是两种不同类型的节点对象。也叫做(NODE)

那么我们接下来看一段代码:

<div id="test"></div>
<script>
  var test = document.getElementById('test');
  console.log(test.nodeName);  // 通过节点方式获取节点名,输出结果:DIV
  console.log(test.tagName);     // 通过元素方式获取标签名,输出结果:DIV
  console.log(document.nodeName); // document属于节点,输出结果:#document
  console.log(document.tagName);    // document不属于元素,输出结果:undefined
</script>

分析如上代码,如果你仔细看不难发现都是模板方式在调用。

标签:

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码