DOM操作

DOM--MDN

1. DOM对象的innerText和innerHTML有什么区别？

innerText返回的是元素内包含的文本内容，多层次时由浅到深排序拼接内容。
innerHTML返回的是html文档结构包括文本

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

elem.children返回的数据类型是（HTMLcollection）是元素的子元素集合，但不包括文本节点
elem.childNodes返回的数据类型（NodeList）是元素的子元素集合，包括HTML节点，所有属性，文本节点

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

document.getElementById() ：匹配指定ID属性的元素节点
document.getElementsByClasName()： 方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素
document.getElementByTagName('')返回所有指定标签的元素
document.getElementByName('')方法用于选择拥有name属性的HTML元素
es5方法
1.querySelector()方法返回匹配指定的CSS选择器的元素节点,如document.querySelector(".myclass");
2.querySelectorAll方法返回匹配指定的CSS选择器的所有节点

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

createElement(标签名)
setAttribute(tagName,value)
removeAttribute(tagName)

var newElement = document.createElement('input');    //创建
newElement.setAttribute('name','user');    //设置
newElement.removeAttribute('name');    //删除

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

添加元素：
    appendChild:在元素末尾添加元素
    insertBefore:在某个元素之前插入元素
删除元素: removeChild

  

       

        

  
   
                                                       
    //输出
     

          
hello
          

          

     

     //删除 
      ulnode.removeChild(li);

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

classList这个属性用于返回元素的类名，作为 DOMTokenList 对象，该属性用于在元素中添加，移除及切换 CSS 类，classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

add()：添加一个类名
item(index)：查找第index个类名
remove(className)：删除一个类名
contains(className)：是否包含指定类名，返回布尔值

let res = contans(className)，通过res是否为true来判断
remove(className)

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

   

       
list1

       
list2

       
list3

   
    点我


 // document.querySelectorAll('.mod-tabs li')
 // document.querySelector('.mod-tabs btn')

//兼容ie7、8
    var liList = document.getElementByTagName('li');
    var btn = document.getElementByClassName('btn')[0]

location

location属性返回一个支队对象，提供了当前文档的URL信息

//假定当前网址为：http://user:[email protected]:4097/path/a.html?x=111#part1

document.location.href // "http://user:[email protected]:4097/path/a.html?x=111#part1"

document.location.protocol //"http"
document.location.host //"www.example.com:4097"
document.location.hostname //"www.example.com"
document.location.port //"4097"
document.location.pathname //"/path/a.html"
document.location.serch //"?x=111"
document.location.hash //"#part1"
documetn.location.user //"user"
document.location.password //"passed"

//跳转到另一个网址
document.location.assign('http://www.google.com')
//优先从服务器重新加载
document.location.reload(true)
//优先从本地缓存加载(默认值)
document.location.reload(false)
//跳转到另一个网址，但当前文档不保留在history对象中，
//既无法使用后退按钮，回到当前文本
document.location.assign('http://www.google.com')
//将location对象转为字符串，等价于document.location.href
document.location.toString()
 
虽然location属性返回的对象是只读的，但是可以将URL赋值给这个属性，网页就会自动跳转到指定网址

document.location = 'http://www.example.com';
//等价于
document.location = 'http://www.example.com';

//刷新页面
document.location.reload()