DOM操作

一、dom对象的innerText和innerHTML有什么区别？

innerText：返回元素内包含的文本内容，元素多层嵌套的时候，会按照元素由浅到深的顺序拼接其内容。
innerHTML：不仅返回元素内包含的文本内容，同时也会返回元素的HTML结构。

二、elem.children和elem.childNodes的区别？

elem.childNodes：获取子元素的节点，包括文本节点、元素节点、注释节点；
elem.children：：获取子元素的元素节点（只包括元素节点）；

三、查询元素有几种常见的方法？ES5的元素选择方法是什么?

getElementById()

    <div id="wrap">
        <div class="inner"></div>
    </div>
    <script>
        var wrap = document.getElementById("wrap");
        console.log(wrap)
    </script>

getElementsByTagName()

   <div id="wrap">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <script>
        var inner = document.getElementsByClassName("inner");
        console.log(inner[0])
    </script>

getElementsByTagName()

   <div id="wrap">
       <div class="inner"></div>
       <div class="inner"></div>
       <div class="inner"></div>
   </div>
   <script>
       var inner = document.getElementsByTagName("div");
       console.log(inner[0])
   </script>

getElementsByName()

     <div id="wrap">
        <div class="inner" name="box"></div>
        <div class="inner" name="box"></div>
        <div class="inner" name="box"></div>
    </div>
    <script>
        var inner = document.getElementsByName("box");
        console.log(inner[0])
    </script>

ES5的元素选择方法:

querySelector()：

        <div id="wrap">
        <div class="inner" name="box">你好啊</div>
        <div class="inner" name="box">你好啊</div>
        <div class="inner" name="box">你好啊</div>
    </div>
    <script>
        var inner = document.querySelector("#wrap .inner");
        console.log(inner.innerText)   //你好啊
    </script>

querySelectorAll()：

<body>
    <div id="wrap">
        <div class="inner" name="box">你好啊</div>
        <div class="inner" name="box">你好啊</div>
        <div class="inner" name="box">你好啊</div>
    </div>
    <script>
        var inner = document.querySelectorAll("#wrap .inner");
        console.log(inner[0].innerText);  //你好啊
    </script>

四~五、如何创建一个元素？如何给元素设置属性？如何删除属性？如何给页面元素添加子元素？如何删除页面元素下的子元素?

HTML:
    <div class="wrap">
        <div class="inner">第一个</div>
        <div class="inner">第二个</div>
        <div class="inner">第三个</div>
        <div class="inner">第四个</div>
    </div>
JS:
       var wrap = document.querySelector(".wrap");
       var innner = wrap.querySelectorAll(".inner"); 
       var newElem = wrap.createElement("div");// 产生元素节点；
       var newContent = wrap.createTextNode("第五个");//产生文本节点；
        newElem.setAttribute("class","inner");//设置新元素的属性；
        newElem.appendChild(newContent);//把文本节点插入生成的元素节点
        wrap.appendChild(newElem);//把生产的元素插入到wrap里面；
        inner[0].removeAttribute("class");//删除wrap第一个inner子元素的class属性；
       wrap.removeChild("inner[1]");//删除wrap第二个inner子元素；

六、element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

element.classList.add("className")：增加一个class；
element.classList.remove("className")：删除一个class；
element.classList.toggle("className")：新增删除切换；
element.classList.contains("className")：判断是否有这样一个class；

HTML:
    <div class="wrap">
        <div class="inner">第一个</div>
        <div class="inner">第二个</div>
        <div class="inner">第三个</div>
        <div class="inner">第四个</div>
    </div>
JS:
       var wrap = document.querySelector(".wrap");
       var inner = wrap.querySelector(".inner");
       console.log(inner.classList.contains("inner"))//true   查找是非有这个class；
       inner.classList.add("box"); //新增一个class；
       inner.classList.remove("inner"); //删除一个class；

七、如何选中如下代码所有的li元素？如何选中btn元素？

       <script>
       var box = document.querySelector(".mod-tabs");
       var oli = box.querySelectorAll("li");
       var obtn = box.querySelector(".btn");
       var oli2 = box.getElementsByTagName('li');
       var obtn2 = box.getElementsByClassName("btn")[0];
    </script>

DOM操作

一、dom对象的innerText和innerHTML有什么区别？

二、elem.children和elem.childNodes的区别？

三、查询元素有几种常见的方法？ES5的元素选择方法是什么?

ES5的元素选择方法:

四~五、如何创建一个元素？如何给元素设置属性？如何删除属性？如何给页面元素添加子元素？如何删除页面元素下的子元素?

六、element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

七、 如何选中如下代码所有的li元素？ 如何选中btn元素？

推荐阅读更多精彩内容

七、如何选中如下代码所有的li元素？如何选中btn元素？