web前端-js小记(8)-DOM

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

1. innerText属性: 返回元素内部的文本内容
2. innerHTML属性: 返回元素内部的HTML结构，包括文本和标签

<div id="box"><p>文本内容</p></div>
<script>
  var ct=document.getElementById("box");
  console.log(ct.innerHTML);    //<p>文本内容</p>
  console.log(ct.innerText);       //文本内容
</script>

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

1. elem.children: 只返回普通DOM元素。
2. elem.childNodes: 返回所有元素，包含DOM元素、文本节点、文字，即元素和元素之间的换行也属于文本节点，注释也属于文本节点。

<div id="box">一级列表<p>文本内容</p></div>
<script>
  var ct=document.getElementById("box");
  console.log(ct.children);    //["<p>文本内容</p>"]
  console.log(ct.childNodes);       //["一级列表","<p>文本内容</p>"]
</script>

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

4、如何创建一个元素？如何给元素设置属性？如何删除属性

5、如何给页面元素添加子元素？如何删除页面元素下的子元素?

<div class="box"></div>
<script>
  var box=document.getElementsByClassName("box")[0];           //查询元素
  var img=document.createElement("img");                                 //创建元素
  img.setAttribute("src","https://www.baidu.com/img/bd_logo1.png");    //设置新元素属性
  box.appendChild(img);                                   //在元素末尾添加新子元素
  box.removeChild(img);                                  //删除元素的子元素
</script>

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

<div class="box"></div>
<script>
  var box=document.getElementsByClassName("box")[0];
  console.log(box.classList.contains("box"));              //返回true，表示元素中包含class名为box
  box.classList.add("box1","box2");                        //给元素添加class
  box.classList.remove("box1","box2");                    //删除元素中的class
</script>

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
<script>
  var li=document.querySelectorAll(".mod-tabs>ul>li");
  var btn=document.querySelector(".btn");
  var btn1=document.getElementsByClassName("btn")[0];
  var btn2=document.getElementsByTagName("button")[0];
</script>

(mission 8)