DOM

(Document Object Model)文档对象模型：js通过DOM来对html文档进行操作

• document：表示整个html网页文档
• object：把网页中的每一个部分转换为一个对象
• model：使用模型来表示对象之间的关系，方便我们获取对象

节点（node）--构成html的最基本单元

常用节点分为四类：

• 文档节点：整个html文档
• 元素节点：html文档中的html标签
• 属性节点：元素的属性
• 文本节点：html标签中的文本内容

事件

https://www.w3school.com.cn/jsref/dom_obj_event.asp

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读一行运行一行。如果将script标签写到页面的上边，在js代码执行时，页面还没有加载出来。

js代码编写在页面下部就是为了，可以在页面加载完成后执行js代码。

onload事件会在整个页面加载完成后才触发
w为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

    window.onload=function(){
        alert('hello,bigyang');
    }

获取元素节点

• 通过document对象调用

1、document.getElementById()

- 通过id属性获取一个元素节点对象

html:
     <button class="btn" ref="btn">按钮</button>
js:
    mounted() {
        var btn = document.getElementById('btn');
        console.log(typeof btn);//object类型
        console.log(this.$refs.btn.innerHTML);//输出标签名称“按钮”
        this.$refs.btn.innerHTML='bigyang';//改变按钮的名称
  },

2、document.getElementsByTagName()

- 通过标签名获取一组元素节点对象

这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到这个对象中；即使查询到的结果只有一个，也会封装到数组中返回。

html:
    <button @click="ob">open</button>
     <ul>
       <li><button class="btn1" ref="btn1">按钮1</button></li>
       <li><button id="btn2" ref="btn2">按钮2</button></li>
       <li><button class="" ref="">按钮3</button></li>
     </ul>
js:
    methods:{
      ob:function (){
      console.log('this is ob function');
      //获取所有标签名为li的元素，封装到类数组lis里面
      var lis = document.getElementsByTagName('li');
      console.log(typeof lis);
      //es6语法
      lis.forEach((item,index)=>{
      //循环输出打印lis里面的每个元素值
        console.log(item.innerHTML);
      })
    }
    }

3、document.getElementsByName()：主要针对表单项标签，这些标签有name属性

注意：innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义

• input标签内有name、value等属性，可以直接元素.属性名得到值；也可以元素.属性名=值，去修改属性值。但是读取class时得用元素.className，因为class属于保留字。读取id可以直接元素.id

- 通过name属性获取一组元素节点对象

html:
     <button @click="gender">open</button>
     male<input class="inp" type="radio" name="gender" value="male">
     female<input class="inp" type="radio" name="gender" value="female">
js:
        gender:function(){
        //获取name为gender的元素，封装到类数组对象gi里面
      var gi = document.getElementsByName('gender');
      console.log(typeof gi);
      gi.forEach((item,index)=>{
        console.log(item.value);
        //input标签内有name、value等属性，可以直接元素.属性名得到值
        alert(item.value)
        alert(item.innerHTML)
        //弹窗是空的，无意义
      })
    }

获取元素节点的子节点

• 通过具体的元素节点调用
  1、getElementsByTagName()

- 方法，返回当前节点的指定标签名后代节点

html:
     <div>
       <button @click="open">按钮</button>
         <ul id="car">
           <li>奥迪</li>
           <li>迈巴赫</li>
           <li>宝马</li>
           <li>雷克萨斯</li>
         </ul>
     </div>
js:
     methods:{
    open: function(){
      var car = document.getElementById('car');
      console.log(typeof car);
      var lis = car.getElementsByTagName('li');
      console.log(lis.length)   //4
      lis.forEach((item,index)=>{
        console.log(item.innerHTML);
      })
    }
  },

2、childNodes

- 属性，表示当前节点的所有子节点

注意：childNodes属性会获取包括文本节点在内的所有节点，标签与标签之间的的空白也会被视为文本节点

html:
         <div>
       <button @click="open">按钮</button>
         <ul id="car">
           <li>奥迪</li>
           <li>迈巴赫</li>
           <li>宝马</li>
           <li>雷克萨斯</li>
         </ul>
     </div>
js:
        open: function(){
      var car = document.getElementById('car');
      var cars = car.childNodes;
      console.log(cars.length); //长度输出为9
      //？？？？问题？？？？？
      //在vue里面只能识别空格文本，换行不行，以及ul和li之间的空格也不能识别
      cars.forEach((item,index)=>{
        console.log(item.innerHTML);
      })
    }

3、firstChild

- 属性，表示当前节点的第一个子节点

html:
         <div>
       <button @click="open">按钮</button>
       <ul id="car">
         <li>奥迪</li>
         <li>迈巴赫</li>
         <li>宝马</li>
         <li>雷克萨斯</li>
       </ul>
     </div>
js:
      methods:{
    open: function (){
      var car = document.getElementById('car');
      console.log(car.firstChild.innerHTML);
      //输出奥迪
    }
  },

4、lastChild

- 属性，表示当前节点的最后一个子节点

html:
        <div>
      <button @click="open">按钮</button>
      <ul id="car">
        <li>奥迪</li>
        <li>迈巴赫</li>
        <li>宝马</li>
        <li>雷克萨斯</li>
      </ul>
    </div>
js:
     methods:{
   open: function (){
     var car = document.getElementById('car');
     console.log(car.lastChild.innerHTML);
     //输出雷克萨斯
   }
 },

5、children

- 属性，可以获取当前元素的所有子元素

也可以直接children[index]得到当前元素的第index个子元素

注意:得到的是一个HTMLCollection.

html:
        <div>
      <button @click="open">按钮</button>
      <ul id="car">
        <li>奥迪</li>
        <li>迈巴赫</li>
        <li>宝马</li>
        <li>雷克萨斯</li>
      </ul>
    </div>
js:
     methods:{
   open: function (){
     var car = document.getElementById('car');
     var car2 = car.children;
     console.log(car2);
     car2.forEach((item,index)=>{
       console.log(item.innerHTML);
     })
     
   }
 },

获取父节点和兄弟节点

• 通过具体的元素节点调用

1、parentNode

- 属性，表示当前节点的父节点

html:
     <div>
       <button @click="open">按钮</button>
       <ul id="car">
         <li>奥迪</li>
         <li>迈巴赫</li>
         <li>宝马</li>
         <li>雷克萨斯</li>
       </ul>
     </div>
js:
      methods:{
   
    open: function (){
      var car = document.getElementById('car');
      //父节点
      console.log(car.parentNode);
      console.log(car.parentNode.innerHTML);
      console.log(car.parentNode.innerText);
    }
  },

2、previousSibling

- 属性，表示当前节点的前一个兄弟节点

3、nextSibling

- 属性，表示当前节点的后一个兄弟节点

注意：1.previousSibling和nextSibling也可能获取到空白文本

2.previousElementSibling和nextElementSibling获取前一个兄弟元素是获取不到空格文本的（ie8以下是不支持的）

previousSibling和nextSibling示例：
html:
    <div>
       <button @click="open">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
  methods:{
    open: function (){
      var car = document.getElementById('car');
      var baoma = car.children[2];
      //baoma的前一个兄弟节点----迈巴赫
      console.log(baoma.previousSibling);
      //baoma的后一个兄弟节点----雷克萨斯
      console.log(baoma.nextSibling);
    }
  },

获取DOM的其他方法

1、获取body元素两种方法

一、var body = document.body
//document中有body属性，保存的是body的引用
二、var body = document.getElementByTagName('body')
//通过标签名拿到body

2、获取整个html

方法一：

js:
    var html = document.documentElement;

方法二：

js:
    var all = document.all;
    console.log(all);//整个html元素
    console.log(all.length);//html元素的个数
    console.log(typeof all);//undfined
    all.forEach((item,index)=>{
        console.log(item);
    })

方法三：

var all = document.getElementByTagName('*')

3、根据元素的class属性值查询一组元素节点对象

注意：ie9以上才支持

    //获取所有class名字为box1的元素
var box1 = document.getElementByClassName('box1')

4、根据一个CSS选择器来查询元素节点对象，需要一个选择器的字符串作为参数

语法：

var div = document.querySelector('.box div')

注意：

1、使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回第一个元素；

2、虽然ie8中没有getElementByClassName('')，但是可以使用querySelector('')。

• 对于CSS有多个元素，则使用querySelectAll('')

该方法和querySelector('')一样，不同的是，querySelectAll('')它会将符合条件的元素封装到一个数组中返回即使符合条件的元素只有一个，也会封装成数组返回。

语法：

var div = document.querySelectorAll('.box div')
//获取多个CSS样式名为.box div的元素
//兼容ie8以上

DOM增删改

1、创建元素节点

//创建一个li元素节点对象
//他需要一个标签名作为参数，将根据标签名创建一个元素节点对象，并将创建好的对象作为返回值返回
var li = document.createElement('li');

2、创建文本节点

//创建一个文本节点对象
//他需要一个文本内容作为参数，将根据该内容创建文本节点，并将新的节点返回
var texts = document.createTextNode('我是文本节点');

3、将2中的文本节点插入到1中的元素节点，作为子节点

向一个父节点中添加一个新的子节点

用法：父节点.appendChild('子节点')

li.appendChild(texts);

1、2、3处代码！！

方法一：

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
    methods:{
    creates: function () {
      var li = document.createElement('li');
      var cars = document.createTextNode('迈凯伦');
      li.appendChild(cars);
      var car = document.getElementById('car');
      car.appendChild(li);
    }
}

方法二：

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
methods:{
    creates :function() {
       var car = document.getElementById('car');
      //innerHTM=''是将之前的元素给替换了
      //innerHTML += ''是将原来的元素给删了，然后重新创建原来的元素本加上新加的元素
      //若原有的元素绑定了事件将会失效
      car.innerHTML += '<li>保时捷</li>'
    }
    },

方法三：结合方法一和方法二来的

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
methods:{
    creates: function () {
      //新建li节点
      var li = document.createElement('li');
      //向li节点中插入文本节点
      li.innerHTML = '<li>保时捷</li>'
      var car = document.getElementById('car');
      //把li节点插入到父节点ul里面
      car.appendChild(li);
    },
    },

4、在指定的子节点前面插入新的子节点

语法：父节点.insertBefore(新节点变量名，旧节点变量名);

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
    methods:{
        creates: function () {
      //新建li元素节点
      var li  = document.createElement('li');
      //新建cars文本节点
      var cars = document.createTextNode('奔驰');
      //把cars文本节点设置为li元素节点的子节点
      li.appendChild(cars);
      var car = document.getElementById('car');
      var baoma = document.getElementById('baoma');
      //把li节点插入到id='baoma'的子节点之前
      car.insertBefore(li,baoma);
    },
}

5、替换子节点：
语法：父节点.replaceChild(新节点变量名，旧节点变量名);

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
    methods:{
        creates: function () {
      //新建li元素节点
      var li  = document.createElement('li');
      //新建cars文本节点
      var cars = document.createTextNode('奔驰');
      //把cars文本节点设置为li元素节点的子节点
      li.appendChild(cars);
      var car = document.getElementById('car');
      var baoma = document.getElementById('baoma');
      //把li节点替换id='baoma'的子节点
      car.replaceChild(li,baoma);
    },
}

6、删除子节点：

语法：父节点.removeChild(子节点)

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
    methods:{
    //获取父节点ul
      var car = document.getElementById('car');
      //获取需要删除的子节点
      var baoma = document.getElementById('baoma');
      //删除id='baoma'的子节点
      car.removeChild(baoma);
    },
}

js优化：

    methods:{
      //获取需要删除的子节点
      var baoma = document.getElementById('baoma');
      //删除id='baoma'的子节点
      //子节点.parentNode.removeChild(子节点)
      baoma.parentNode.removeChild(baoma);
    },
}

7、读取节点内的HTML代码：

-属性，节点.innerHTML

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
    methods:{
      var car = document.getElementById('car');
      alert(car.innerHTML);
    },
}

8、设置节点内的HTML代码：

-属性，节点.innerHTML = '文本内容'

html：
     <div>
       <button @click="creates">按钮</button>
       <ul id="car">
         <li id="aodi">奥迪</li>
         <li id="miabahe">迈巴赫</li>
         <li id="baoma">宝马</li>
         <li id="leikeshas">雷克萨斯</li>
       </ul>
     </div>
js:
    methods:{
      var baoma = document.getElementById('baoma');
      baoma.innerHTML = '保时捷';
    },
}