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的元素选择方法是什么?

方法	含义
document.getElementById()	通过id来查询元素
document.getElementsByClassName()	通过class来查询元素，返回的是数组，所以要使用加数组下标
document.getElementsByTagName()	通过元素名称来查询元素
document.getElementsByName()	通过元素的name属性来查询元素
document.ElementFromPoint(x,y)	通过定位来查询元素
document.querySelector("#box .wrap")	ES5支持，参数写法可按照CSS选择器，返回单个元素
document.querySelectorAll("#box .wrap")	ES5支持，参数写法可按照CSS选择器，返回多个元素

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

序号	操作	代码
0	查询元素	var div=document.getElementById("box");
1	创建元素	var a=document.createElement("a");
2	添加文本节点	var aText=document.createTextNode("hello");
3	给创建的元素添加文本节点	a.appendChild(aText);
4	设置属性	a.setAttribute("href","http://www.baidu.com");
5	添加到元素中	div.appendChild(a);
6	删除属性	a.removeAttribute("href");

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?

classList方法	含义
element.classList	获取元素的class名称，返回数组
element.classList.add(class1, class2, ...)	给元素增加class
element.classList.remove(class1, class2, ...)	删除元素的class
element.classList.contains(class)	判断元素中有没有包含参数的class
element.classList.toggle(class,true/false)	在元素中转换类名，第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，false表示强制移除，true表示强制添加。

<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)