HTML DOM学习笔记

正是清明好时节,宅在图书馆学js。

题外话:换了套新键帽后键盘看起来是真的舒服,感觉打字也有了新的动力2333,明天粗去玩,去坐坐济南的新地铁,去看看市里的繁华景象(


DOM是啥

HTML DOM是HTML文档对象模型的缩写,名字里带着HTML,但其实主体部分还是js。它将网页中的各个元素都看作一个个对象,从而使网页中的元素也可以被计算机语言获取或者编辑。 DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。

换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

方法是您能够执行的动作(比如添加或修改元素)。

属性是您能够获取或设置的值(比如节点的名称或内容)。

(摘自w3cschoool与百度百科)

getElementById()相关

返回带有指定ID的元素,通过ID控制HTML。可以通过innerHTML属性去访问该id的值,或者去修改它。innerHTML属性可用于获取或改变任意HTML元素。

1
2
3
4
5
6
7
8

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write("<p>发出了 intro 段落的声音:" + x.innerHTML + "</p>");
</script>

同时,也有getElementsByTagName(),它获取的是带指定标签名的元素结点列表。getElementsByClassName(),它获取包含带有指定类名的元素节点列表。

属性相关

最简单的是上面刚说到的使用innerHTML属性。它可以查看HTML属性同时也支持修改。除此之外还有nodeName,它规定了结点的名称,但是它是只读的,我们不能修改它。

(摘自w3cschool)

nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue属性规定节点的值。具体来说,元素节点的话,一般是undefined或者null,文本节点的值就是它本身,属性节点的值是属性值。还有一个nodeType,它返回节点类型。

运用DOM修改HTML以及CSS

使用innerHTML可以修改HTML文本,使用id.style.*可以修改对应id的css参数。比如要修改test标签的文本颜色,假设该标签的id已经被get到了js变量a中,可以写a.style.color = "blue";

运用DOM创建、删除与替换HTML元素

不仅可以修改,它也支持创建。运用DOM创建新元素需要先新建元素节点和文本节点。同时把它追加到已有的元素上,因为DOM是控制了一个节点树,我们只创建是无法生效的,必须将它塞到树里面才能生效。

简单来讲,假如你要往div里插一个p,然后在里头加入一些文字,你需要创建两个新的元素节点还有一个新的文本节点。两个元素节点一个是p,另一个是div,文本节点创建后需要将它appendChild到p里面,而p还要再appendChild到div里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

那么删除如何操作?如需删除HTML元素,我们必须清楚该元素的父元素。简单来说,需要两个元素,一个是你要删除的元素,另一个是你要删除的元素父级元素,然后对父级元素使用removeChild方法,传入要删除元素的变量名作为参数去删除这个元素。DOM不允许在不引用父元素的情况下删除某个元素,它必须了解要删除元素的父元素才能去定位到你删除的子元素。

但是如果我不知道它的父元素怎么办?可以让它自己找。提供一个常用的解决方法:找到需要删除的子元素,然后使用parentNode属性来查找其父元素。

1
2
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

如果需要替换元素,则应该使用replaceChild()方法。它接收两个参数a,b,它可以把b元素替换成a元素。

控制事件

事件顾名思义便是网页运作过程中发生的事情。包括但不限于点击,鼠标移动,输入内容并提交等交互性行为。当HTML元素开始“搞事情”时,浏览器便会生成事件。

一个简单的例子便是button。通过button标签的onclick属性可以控制当按钮被按下时会发生什么。比如alert一条信息。如果操作不多,可以直接在onclick里面直接写下命令,当操作比较多时,可以把命令封装为函数,然后在onclick时调用函数即可。

下面是一个按钮。

如果需要改变当前节点的文字,可以使用this。

下面是一个按钮。

我们可以通过间接的方式给button加入事件,运用DOM可以做到这一点。只需要给button加上一个id,然后运用DOM去get到这个id,此后的事件就可以在js里完成了。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>

undefined

</html>

此外还有各种关于鼠标的事件,用于指针移动,点击等操作可以触发的事件。比较好理解,这里不再赘述。

嗯,到这为止,DOM就。。。学完了???


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:HTML DOM学习笔记

文章作者:Shawn Zhou

发布时间:2019年04月05日 - 08:04

最后更新:2019年04月13日 - 11:04

原始链接:http://shawnzhou.xyz/2019/04/05/19-04-05-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%