HTML DOM (一)：DOM理解

最新推荐文章于 2024-04-30 23:33:01 发布

Cesar_xu

最新推荐文章于 2024-04-30 23:33:01 发布

阅读量504

点赞数

分类专栏：笔记文章标签： dom js

本文链接：https://blog.csdn.net/cesar_xu/article/details/49931461

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是DOM? – –文档对象模型(Document Object Model)。

呃，这是官方的说法。

首先，DOM是元素，是对象。是个东西，所以，我们才能操作她（操练起来），操作什么？

把DOM看作你的对象，那么你可以对你的对象做些什么？（）

可以给她穿衣服，可以脱…..别乱想！是你穿而不是别人穿，这是属性；
也可以做一些你喜欢的事….呃，能做的事，这就是方法。

所以，我们要操练（作）的是属性和方法，不是你的女朋友！

HTML文档 - -

<html>
<head>
<meta charset=”utf-8”>
<title>这是一个文档<title>
</head>
<body>
<a href=”https://www.baidu.com” target=”_blank”><img src=”file/xxx.xxx”></a>
<p>我是一段文本.</p>
</body>
</html>

上面是一个基本的HTML结构。包括以下

HTML标签：元素节点
链接地址：属性节点
内容：文本节点

所以，DOM操作，归根结底就是 - - 节点操作。

节点有关系！
这种关系是相对的！！
可以称之为 - - 关系链！！！（你可以是儿子，也可以是孙子，也可以是爸爸，同时可以是爷爷….特么的，让我想到前目的地了…）
谁被包含，谁就是儿子 , 儿子包含的自然就是孙子了….⊙﹏⊙!

关系链

//父子链 - -
parentNode  // 儿子找爸爸
firstChild  // 爸爸找老大（儿子）
lastChild   // 爸爸找老小（儿子）

//兄弟链 - -
nextSibling     // 老大找老小
previouSibling  // 老小找老大

总结为：特有的，始终存在的 - - 属性。

下面介绍4个方法：

document.getElementById       // 获取元素id
document.getElementsByTagName // 获取标签

getAttribute                  //  获取(查询)属性
setAttribute                  //  设置(改变)属性

这只是标准为我们设定的一些方法，当我们的水平牛x的时候，也可以自己编写一些牛x的方法。

上面，我们提到了，关系链 - - 属性，然后又说了4个常用的方法。

那么接下来，我们就可以，操（练）起这些属性和方法。

<script type="text/javascript">
    var obj = document.getElementById('div1'); //获取元素
    alert(obj.firstChild.nodeType); //弹出元素子元素的节点类型：Type
</script>
<div id="div1">
    <p>我是内容！</p>
</div>