如何获取节点,他们有什么不同，js的DOM节点增删改查

基本了解

  1)Document.getElementById()//id名

  2)Document.getElementsByClassName()//标签名

  3)Document.getElementsByTagName()//类名

css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null

  4)Document.querySelector()

css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

  5)Document.querySelectorAll()

前缀为document，意思是在document节点下调用这些方法，当然也可以在其他的元素节点下调用

一.document.getElementById

因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
get获得 element元素 by通过驼峰命名法
参数 id是大小写敏感的字符串返
回的是一个元素对象

  <div id="time">2020.05.20</div>

var timer=document.getElementById('time')
console.log(timer);
console.log(typeof timer);
console.dir打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer)

二.使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

1.返回的是获取过来元素对象的集合以伪数组的形式存储的

var list = document.getElementsByTagName('li')
console.log(list);
console.log(list[0])

2.我们想要依次打印里面的元素对象，我们可以采取遍历的方式

for(var i=0;i<list.length;i++){
  console.log(list[i])
}

3.如果页面中只有一个li 返回的还是伪数组的形式
4.如果页面中没有这个元素返回的是空的伪数组的形式
5.element.getElementsByTagName(‘标签名’) 父元素必须是指定的单个元素

var ol=document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'))

var ol=document.getElementById('ol');
console.log(ol.getElementsByTagName('li'))

三.documentgetElementsByClassName 根据类名获得(返回)某些元素对象集合

  var boxs=document.getElementsByClassName('box')
  console.log(boxs)

四.document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象

切记：里面的选择器需要加符号比如类要加. id要加#

 var firstBox=document.querySelector('.box')
 console.log(firstBox)
 var nav=document.querySelector('#nav')
 console.log(nav)
 var li=document.querySelector('li')

五.document.querySelectorAll(‘选择器’) 返回指定选择器的所有元素对象

var allBox=document.querySelectorAll('.box')
console.log(allBox)
var list=document.querySelectorAll('li')
console.log(list)

六.获取body 元素

 var bodyEle=document.body;
 console.log(bodyEle)
 console.dir(bodyEle)

七.获取html 元素

  var htmlEle =document.html;//undefined
  // var htmlEle =document.document.html;//Uncaught TypeError: Cannot read property 'html' of undefined
  var htmlEle =document.documentElement;
  console.log(htmlEle)

八.Dom节点操作

<h1>1.查找</h1>
DOM1：getElementById(),getElementsByTagName()<br>
DOM扩展：querySelector()（返回第一个匹配的元素）,querySelectorAll()（返回全部匹配的元素）<br>
HTML5：getElementsByClassName()

<h1>2.插入</h1>
appendChild()：末尾插入<br>
insertBefore()：特定位置插入

<h1>3.替换</h1>
replaceChild()：接受两个参数，第一个为要插入的节点，第二个为要替换的节点

<h1>4.删除</h1>
removeChild()

九.增删改查的小案例

<ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

    <button id="add">插入</button>
    <button id="replace">替换</button>
    <button id="remove">删除</button>

    <script >
        var list=document.getElementById('list');
        var add=document.querySelector('#add');
        var replace=document.querySelector('#replace');
        var remove=document.querySelector('#remove');

        var li=document.createElement('li');
        li.innerHTML='hello';

        function addNode(){
            //尾插
            //list.appendChild(li)
            //任意位置插
            list.insertBefore(li,list.childNodes[2])
        }
        function replaceNode(){

            //替换任意位置,要替换第一个或者最后一个只需将第二个参数改为list.firstChild / lastChild
            list.replaceChild(li,list.childNodes[1])
        }
        function removeNode(){
            //移除首/尾元素
            //list.removeChild(list.firstChild)
            // list.removeChild(list.lastChild)
            //移除任意位置上的元素
            list.removeChild(list.childNodes[1])
        }

        add.addEventListener('click',addNode);
        replace.addEventListener('click',replaceNode);
        remove.addEventListener('click',removeNode);
        
    </script>