这个其实还是因为一道题,问html中的dom根节点是哪个。这个其实我当时第一反应是body的,但是后来一想,根节点,也就是最头上的那个,没有自己的父元素,那这个肯定是html啊,然后百度一查,发现确实是html。

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

而在dom中,标签们都属于什么节点呢?接下来看一下解析。

<ul><li>整个文档内容是一个文档节点</li></ul><ul><li>每个HTML中的元素是都是元素节点 </li></ul><ul><li>HTML的元素内的文本是文本节点 </li></ul><ul><li>每个HTML属性是都属于属性节点 </li></ul><ul><li>注释则是注释节点</li></ul>

而dom中的html文档则被当作节点树了。
浅谈HTML DOM
其实这个dom说简单也是非常简单的,只要记住每个节点都有自己的匹配对象就可以了,所有的标签都是可以通过dom来获取。简单举个例子,在<title>DOM 教程</title>中,元素节点 <title>,包含值为 "DOM教程" 的文本节点。获取节点

其实JavaScript获取节点我认为最好的是通过id来获取,document.getElementById()这个方法,通过元素的id来获取改节点,然后进行操作。

随便举个例子。
<div id="aaa"></div>
<script>document.getElementById("aaa")</script>这样也就通过ById来获取该元素了。
不光可以通过id来获取对象,还可以通过class,通过tag,通过name来获取。
getElementById()
getElementsByTagName()
getElementsByClassName()
最常用的就是这三个了,其实通过原生JavaScript来获取对象不是很方便,通过jQuery来获取的话实非常容易的,不过其实各有各的好处吧。
一般操纵dom的都是方法,通过方法来对对象进行操作。

appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
比如说通过点击来使一个div修改颜色,可以是通过.style来操作,其实也可以通过上面的方法来操作的,也可以通过setAttribute()来修改,亦或者通过在style里添加一个没人用的class,给里面添加想要的属性,然后通过document.getElementById("").classList.add("");这个来增加上那个class,这样就会使div获得该class内的属性了。

其实dom可以完成所有的html操作,甚至可以只写个html框架出来,然后其余的全部都靠JavaScript来进行修改的.

这个也是目前最流行的方法了,通过JavaScript来渲染页面。
本文作者:博主:     文章标题:浅谈HTML DOM
本文地址:https://zjzdmc.top/jsfx/92.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 19 日 09 : 43 PM
如果觉得我的文章对你有用,请随意赞赏