DOM基础

一、概念

• 是JavaScript操作HTML文档的接口 全称为 文档对象模型 (Doucment Object Model)
• 作用：把文档中的代码翻译成一个对象模型 从而可以用脚本进行各种操作
• 该模型中所有相关的标签属性注释文本等12种数据都会翻译为一种类型的对象 统称节点对象
• 浏览器根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构
• DOM的最小组成单位是节点(node)，文档的树形结构(DOM树)由12种类型的节点组成

12种节点：元素节点、文档节点、文档类型节点、文档片段节点、文本节点、注释节点、特性节点、CDATA节点、实体名称节点、实体引用名称节点、处理指令节点、DTD声明节点

 DOM树：

二、获取元素的方式

（一）系统提供的方法

  旧方法

• document.getElementById

<div id="box1"> 盒子box1</div>

<script>
var div1=document.getElementById("box1") //如果没有就返回null
console.log(div1)   //返回某一具体元素
</script>

• document.getElementsByClassName

<div class="box2">盒子2-1</div>
<div class="box2">盒子2-2</div>
<div class="box2">盒子2-3</div>

<script>
var arr = document.getElementsByClassName("box2")
console.log(arr) //返回值是类数组 是一个数据容器 装了3个类名为box2的div
</script>

• document.getElementsByName

<input type="radio" name="rad">
<input type="radio" name="rad">
<input type="radio" name="rad">

<script>
var name = document.getElementsByName("rad")
console.log(name)
</script>

• document.getElementsByTagName

<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>

<script>
var tag = document.getElementsByTagName("div")
console.log(tag) //返回值是类数组 是一个数据容器 装了3个div
</script>

   H5出的新方法

• document.querySelector

<div id="box">盒子1</div>
<div id="box">盒子2</div>
<div id="box">盒子3</div>

<script>
var el = document.querySelector("#box") //选择符合选择器的第一个元素 没有就返回null
console.log(el) //第一个div 盒子1
</script>

• document.querySelectorAll

<div id="box">盒子1</div>
<div id="box">盒子2</div>
<div id="box">盒子3</div>

<script>
var els = document.querySelectorAll(".box2") //符合选择器的所有元素 没有返回null
console.log(els) //全部的div 盒子1、2、3
</script>

    注：h5新出的方法更好用 但是document.getElementsById()是最快的

（二）系统提供的直接获取的方法

• document.body        //body标签 （常用）
• document.forms       //form表单集
• document.anchors   //a标签集
• document.images    //图片集
• document.links        //连接集
• document.URL        //当前文档的网址

（三）通过关系获取的方法

   示例的html代码:

<div id="box1">
  <div class="box2" id="box">2</div>
  <div class="box2">
     <div class="box3" id="box3">3</div>
  </div>
  <div class="box2" id="box4">4</div>
</div>

• 父级 父元素和父节点是同一个

//以id为box的div为基准 获取它的父节点
var box = document.querySelector('#box')
var boxpe = box.parentElement  //父元素
var boxpd = box.parentNode    //父节点

• 子级 子元素和子节点不一定是同一个

//以id为box1的div为基准 获取它的子节点
var box1 = document.querySelector('#box1')
var els = box1.children //子元素们 是类数组 包括3个div元素
console.log(els)    //HTMLCollection(3) 0: div#box.box2  1: div.box2  2: div#box4.box2
var nodes = box1.childNodes //子节点们 是类数组 包括3个div元素节点和文档节点等
console.log(nodes)  //NodeList(7) 0: text  1: div#box.box2   2: text  3: div.box2
                    //            4: text  5: div#box4.box2  6: text
以id为box的div为基准 获取它的子节点
var box = document.querySelector('#box')
var bc = box.children
console.log(bc) //HTMLCollection(0) 返回空的数据容器

• 兄弟节点

   上一个兄弟： previousElementSibling  上一个兄弟元素 没有返回null

                          previousSibling                上一个兄弟节点 没有返回null

//以id为box4的div为基准 获取它的哥哥（上一个）节点
var box4 = document.querySelector('#box4')
var bel = box4.previousElementSibling //上一个元素
console.log(bel)   // class="box2"的div
var bnode = box4.previousSibling //上一个节点
console.log(bnode) //#text

  下一个兄弟 ： nextElementSibling    下一个兄弟元素 没有返回null

                          nextSibling                  下一个兄弟节点 没有返回null

//以id为box的div为基准 获取它的弟弟（下一个）节点
var box = document.querySelector('#box')
var bne = box.nextElementSibling //下一个元素
console.log(bne)
var bns = box.nextSibling //下一个节点
console.log(bns)

//以id为box4的div为基准 获取它的弟弟（下一个）节点
var box4 = document.querySelector('#box4')
var bne = box4.nextElementSibling //下一个元素
console.log(bne) //null

• 第1个子节点

var box=document.getElementById("#box")
var fs1=box.firstChild           //第1个子节点
var fs11=box.firstElementChild   //第1个子元素
console.log(fs1,fs11)  // "2"  null

• 最后一个子节点

var box4=document.getElementById("#box4")
var ls1=box4.lastChild           //最后一个子节点
var ls11=box4.lastElementChild   //最后一个子元素
console.log(ls1,ls11)   // "4"  null

• 获取自己是父元素中的第几个子元素/节点

//自己实现这个方法:调用者是父元素中的第几个元素 .index()                        
 Object.prototype.index1=function() {
     console.log(this)
     var arr=this.parentElement.childNodes
     for (let i = 0;i<arr.length;i++) {
         if(this==arr[i]){
             return i
            }
     }
 }
 var index=document.getElementById("box").index1()
console.log(index)

//另一种方法
var son1=document.getElementById("box1").children[1]   //第二个子元素
var son2=document.getElementById("box1").childNodes[1] //第二个子节点