前端入门学习笔记（二十九）JavaScript入门（十二）DOM（一）什么是DOM？以及DOM的一个小坑

最新推荐文章于 2024-04-21 18:41:54 发布

TUTsmile

最新推荐文章于 2024-04-21 18:41:54 发布

阅读量186

点赞数

分类专栏： JavaScript # DOM 文章标签： DOM DOM 坑

本文链接：https://blog.csdn.net/tutsmile/article/details/96484116

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM

3 篇文章 0 订阅

订阅专栏

什么是DOM

DOM把所有的html都转换为节点
整个文档是一个节点
元素是节点
元素属性是节点
元素内容是节点
注释也是节点
如本例
通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点,输出结果如下

<html>
<body>
	<div id="d1">hello HTML DOM</div>
</body>
  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);//文档节点[object HTMLDocument]
p("元素"+div1);//元素[object HTMLDivElement]
p("属性节点"+div1.attributes[0]);//属性节点[object Attr]
p("内容节点"+div1.childNodes[0]);//内容节点[object Text]
</script>
</html>

总的来说HTML/XML 文档在浏览器内表示为 DOM 树。

标签成为元素节点并形成文档结构。
文本成为文本节点。
如此等等，HTML 中的所有东西在 DOM 中都有它的位置，甚至是注释。

如何查看DOM？（以及一个DOM的小坑）

我们可以使用开发者工具来检查 DOM 并手动修改它。
不知道大家是否有尝试过，打开浏览器后浏览器中点击键盘上的F12键，然后点击弹窗左上角的鼠标按键，并点击一下你所想要查看的内容（此处以一个简单的网页作为示例）
点击左上角的鼠标按钮
网页代码如下所示

<!DOCTYPE HTML>
<html>
<head>
    <title>This is title</title>
</head>
<body>
    This is body
</body>
</html>

点击网页中的This is body
在这里插入图片描述
你可以在下方窗口中发现有“网页源代码”出现，$0代表的是你最后选中的元素。

此时你可以通过控制台与DOM进行互动，比如输入以下指令，则body的背景将会变为红色。

这就是DOM，有HTML中的一切元素，而且有时候HTML中没有的，DOM中也会自动修正，如

	<p>Hello
	<li>Mom
	<li>and
	<li>Dad

在DOM中会被修正为

    <p>Hello</p>
    <li>Mom</li>
    <li>and</li>
    <li>Dad</li>

自动修正原本是一件好事，但HTML中有table时，还会多一些元素。
因为在DOM中规定table必须要有一个<tbody>，而在HTML中，此属性被忽略。所以在生成DOM时，会自动补全标签，原网页代码如下

<!DOCTYPE html>
<html>
<body>
    <table id="table">
        <tr>
            <td>1</td>
        </tr>
    </table>
</body>
</html>

在浏览器中呈现的时候，生成的DOM如下所示
在这里插入图片描述

TUTsmile

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录