这个其实还是因为一道题,问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文档则被当作节点树了。
其实这个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来渲染页面。