DOM基础：DOM结构、常见的节点类型、获取元素

DOM小菜宝典

什么是DOM？

DOM，全称是“Document Object Model（文档对象模型） ，它是由W3C定义的一个标准

DOM结构

DOM采用的是树形结构，一个个树枝的形式来表示页面中的每个元素

如上图
DOM的树形结构也叫“DOM树”

在这棵树上，HTML元素是树根，也叫根元素

这棵树上的head和body位于同一层次上，有着共同的父节点（html），所以head和body是兄弟节点

head有子节点，body也有子节点，如上以此类推，如果还有下一层，我们还可以继续找下去

常见的节点类型

在js中，节点分为很多类型，DOM节点有12种，但是常见的只有3种（其它的可以作为了解，不需掌握）

1—>元素节点—>(红色线箭头)

2—>属性节点—>attribute（绿色线箭头）

3—>文本节点—>text（紫色线箭头）

<div id="box">啊哈哈哈哈</div>

获取元素节点

在一个页面中，我们想要对某个元素进行操作，就必须通过一定的方式获取到后，才能进行相应的操作

在js中，我们可以通过一下六种方式来获取指定元素

1. getElementById()
2. getElementByClassName()
3. getElementByTagName()
4. getElementByName()
5. querySelector()和 querySelectorAll()
6. document.title和document.body

注：区分大小写

1 —getElementById(“id名”)

例：<div id="box1">ooooo</div>

var a=document.getElementById(“box1”);

2—getElementByClassName(“class名”)

例：<div class="box2">ooooo</div>

var a=document.getElementByClass(“box2”);

3—getElementByTagName(“标签名”)

例：<div >ooooo</div>

var a=document.getElementByTagName(“div”);

4—getElementByName(“name名”)

例：<input type="text" name="one">

var a=document.getElementByName(“one”);

5—querySelector()和 querySelectorAll(“指定选择器，获取全部)

注：querySelecto()和 querySelectorAll是无法操作动态创建的元素

例：<div class=” box“ id=” boxbox“>ooooo</div>

var a=document.querySelector(".box");

var b=document.querySelector("#boxbox");

<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
`<div  id="box1">ooooo</div>
`<div  id="box1">ooooo</div>
`<div  id="box1">ooooo</div>
`<div  id="box1">ooooo</div>
`<div  id="box1">ooooo</div>

var d=document.querySelectorAll(" li ");//获取所有li

var e=document.querySelectorAll(" #box1 ")；
//获取所有id为box1的元素

6—>document.title和document.body

因为页面只有一个title和body属性，所以专门提供了这两个方法

关于DOM这点小基础的分享就到这里，希望不明白的 小菜们看到后会有种恍然大明白的感觉