DOM操作任务

题目1：

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

innerText 返回元素内包含的文本内容，而且会把元素内的标签元素去掉。
innerHTML 返回元素内的HTML结构，包含了标签元素和文本

  
    
      hello
      jirengu
    
  

div.innerText    
    // 返回"hello jirengu"
div.innerHTML返回    
    // "hellojirengu"

题目2：

elem.children和elem.childNodes的区别？

elem.children 是查询该元素下的所有子元素对象，不包括文本对象
elem.childNodes 是查询该元素下的所有子对象，包括文本对象


  hello world
  我是一级标题
  我是一个大段落
  这是一个饥人谷的链接


document.body.children
/*[h1.title, p.content, a#linking, linking: a#linking]
获得的是body下的子元素，不包括文本对象
*/

document.body.childNodes
/*[text, h1.title, text, p.content, text, a#linking, text, comment, text]
获得的是body下的所有元素，包括文本对象，换行也是文本对象。
*/

题目3：

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

常见方法：

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()

ES5的方法：

document.querySelector()
document.querySelectorAll()
document.elementFromPoint()

题目4：

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

创建元素：

document.creatElement("div")创建了
元素节点，括号内不能带<>
document.creatTextNode("hello")创建了一个文本节点，内容为“hello”的字符串

元素属性操作：

node.getAttribute("id")获取元素的属性值，括号内为属性名称
node.createAttribute("name")生成一个新的属性对象节点，括号内为属性的名称
node.setAttribute("name","me")设置一个属性，name = "me"，可用来增加，修改属性
node.removeAttribute("name")删除了name属性

题目5：

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

appendChild()，在元素的末尾添加元素。

var body = document.body
var div = document.createElement("div")
body.appendChild(div)     // 在元素的末尾添加了  元素。

insertBefore()，在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
//插入元素与被插入元素是平级的，所以这里用newDiv.firstChild来让文本节点插入元素中。

replaceChild()，接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

removeChild()，删除元素

parentNode.removeChild(childNode);

题目6：

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

classList这个属性用于返回元素的类名，作为 DOMTokenList 对象，该属性用于在元素中添加，移除及切换 CSS 类
add(class1, class2, ...) ，在元素中添加一个或多个类名，如指定的类名已存在，则不会添加
contains(class)，返回布尔值，判断指定的类名是否存在
item(index)，返回类名在元素中的索引
remove(class1, class2, ...)，移除元素中的一个或多个类名，移除不存在的类名不会报错
toggle(class, true|false)，在元素中切换类名，第一个参数为要在元素中移除的类名，并返回false。如果类名不存在则会在元素中添加类名，并返回true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管类名是否存在。

题目7：

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


   
       list1

       
list2

       
list3

   
   


//选中所有的元素
document.getElementsByTagName("li")
document.querySelectorAll("li")  

//选中btn元素
document.getElementsByClassName("btn")[0]
document.getElementsByTagName("button")[0]
document.querySelector(".btn")   
document.querySelectorAll(".btn")[0]

DOM操作 任务