Web23.DOM操作

DOM 文档对象模型

document对象

document.doctype
document.head
document.location
document.location.href
document.location.protocol
document.location.host
document.location.hostname
document.location.port
document.location.search
document.location.hash
document.location.user
document.location.password

document.location.assign('http://www.google.com')
document.location.reload(true)
document.location.reload(false)
document.location.assign('http://www.google.com')
document.location.toString()

document.open()
document.close()

document.write()

Elementy对象

Element对象表示HTML元素
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作

Element有几个重要的属性
nodeName
nodeType
className
id
children
childNodes
firstChild
lastChild
nextSibling
previousSibling
parentNode、parentElement

getElementById()
getElementsByClassName()
getElements

题目1： dom对象的innerText和innerHTML有什么区别？

Element.innerHTML 属性设置或获取描述元素后代的HTML语句。Element.innerText innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

题目2： elem.children和elem.childNodes的区别？

children: 子元素列表(HTMLCollection) 当前元素子元素的集合
childNodes: 子元素列表(NodeList)  当前元素子元素以及文本的集合

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

getElementById()
var elem = document.getElementById("test")

getElementsByClassName()
var elem = document.getElementsByClassName('tab')

getElementsByTagName()
var paras = document.getElementsByTagName('p')

ES5的方法：
querySelector()
querySelectorAll()

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

通过createElement()方法创建元素
通过setAttribute()方法给元素设置属性
通过removeAttribute()方法删除属性

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

appendChild()  在元素末尾添加元素
insertBefore()   在某个元素之前插入元素
removeChild()  接受两个参数：要插入的元素和要替换的元素

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

//div 是具有class = 'foo bar'的<div>元素的对象引用
div.classList.remove('foo');
div.classList.add('anotherclass');

//如果visible被设置 则删除它 否则添加它
div.classList.toggle('visible');

//添加/删除  visible，取决于测试条件  小于10
div.classList.toggle('visible', i < 10);
alert(div.classList.contains('foo'));

//添加或删除多个类
div.classList.add('foo', 'bar');
div.classList.remove('foo', 'bar');

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

7.png

<script>
    //选中所有的li元素
    document.getElementsByTagName('li')
    document.querySelectorAll('li')
    //选中btn元素
    document.getElementsByClassName('btn')
    document.querySelector('.btn')
</script>