dom对象的innerText和innerHTML有什么区别？
- innerHTML属性
在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素，注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换元素原先的所有子节点。
<div id = "ct">
<p class = "p1">你好么</p>
<span>我在做练习题</span>
</div>
对于以上代码，<div>的innerHTML属性就是如下图：
[图片上传失败...(image-ccc53b-1550654753390)]
注意点：不同的浏览器返回的innerHTML值不完全相同。
在写模式下，innerHTML的值会被解析成DOM树，替换调用元素原来的所有子节点。
[图片上传失败...(image-4750a5-1550654753390)]
- innerText属性
通过innerText属性可以操作元素中包含的所有文本内容，包含子文档树中的文本。在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来。在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
<div id = "ct">
<p class = "p1">你好么</p>
<span>我在做练习题</span>
</div>
对于以上代码div的innerText属性后的结果见下图：
捕获.PNG
用innerText写入值的结果见下图：
捕获.PNG
elem.children和elem.childNodes的区别？
- element.children属性
文档中所有的节点都有一个children属性，其中保存着一个NodeList对象。NodeList对象是一种类数组对象，用于保存一组有序的节点，可以通过为止来访问这些节点。它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。
各节点之间的关系如下图：
TIM图片20190220155515.jpg - element.childNodes属性
由于IE9之前的版本与其他浏览器在处理文本节点的空白符时有差异，因此就出现了children属性。这个属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。除此之外，children属性与childNodes没什么区别，即在元素只包含子元素节点时，这两个属性值相同。
查询元素有几种常见的方法？ES5的元素选择方法是什么?
-
getElementById()：接收一个参数，要取得的元素的ID。如果找到相应的元素则返回该元素，如果不存在带有相应ID的元素，返回Null。 -
getElementsByTagName()：这个方法接收一个参数，既要取得元素的标签名，而返回的是包含零个或多个元素的NodeList。 -
getElemensByName()：返回带有给定name特性的所有元素，只有HTMLDocument类型才有。 -
getElementsByClassName()：接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。 -
querySelector()：接收一个CSS选择符（无法选中CSS的伪元素），返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回NULL。 -
querySelectorAll()：接收一个CSS选择符，返回的是所有匹配的元素。 -
elementFormPoint()：接收两个参数，分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值），则返回null。
<div id = "ct">你好</div>
<p class = 'p1'>我在学习</p>
<span class = "p1">在学习DOM</span>
<div>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</div>
<input type = "radio" name = "color">red
<input tyoe = "radio" name = 'color'>green
<input type = "radio" name = "color">black
<script>
var ctDiv = document.getElementById('ct')
console.log(ctDiv)
var p1 = document.getElementsByClassName('p1')
console.log(p1)
var div = document.getElementsByTagName('div')
console.log(p1)
var color = document.getElementsByName('color')
console.log(color)
var li1 = document.querySelector('li')
console.log(li1)
var liAll = document.querySelectorAll('li')
console.log(liAll)
捕获.PNG
如何创建一个元素？如何给元素设置属性？如何删除属性
-
createElement()：可以创建新元素，该方法只接受一个参数，既要创建元素的标签名。 -
createTextNode()：创建文本节点，该方法接收一个参数---要插入加点中的文本。 -
createDocumentFrangment()：创建文档片段，即可以在里面保存将来可能添加到文档中的节点。
<div id = "ct">
<p>上面将有插入的内容</p>
</div>
<script>
var span = document.createElement('span')
var text = document.createTextNode('插入的节点是span')
span.appendChild(text)
console.log(span)
var div = document.getElementById('ct')
document.body.insertBefore(span,div)
console.log(document.body)
</script>
捕获.PNG
-
setAttribute()：该方法接收两个参数，要设置的特性名和值，如果特性已经存在，setAttribute()会以指定的值替换现有的值，如果特性值不存在，setAttribute()则创建该属性并设置相应的值。
<div id = "ct">
<p>上面将有插入的内容</p>
</div>
<script>
var div = document.getElementById('ct')
div.setAttribute('id','content')
console.log(div)
var p = document.getElementsByTagName('p')
p[0].setAttribute('id','p1')
console.log(p[0])
</script>
捕获.PNG
-
removeAttribute()：该方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，也会从元素中完全删除特性。
div.removeAttribute('ct')
如何给页面元素添加子元素？如何删除页面元素下的子元素?
-
appendChild()：用于向childNodes列表的末尾添加一个节点。
var div = document.createElement('div')
div text = document.createTextNode('hello')
div.appendChild(text)
-
insertBefore()：该方法接收两个参数，要插入的节点和要参考的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点。
var div = document.getElementById('ct')
var p = document.createElement('p')
document.body.insertBefore(p,div)
-
removeChild()：该方法接收一个桉树，既要移除的节点。
parentNode.removeChild(childNode)
element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
- 方法
-
item() / []：取得classList属性的每一个元素。 -
add()：将给定的字符串值添加到列表中，如果值已经存在，就不添加了。 -
contains()：表示列表中是否存在给定的值，如果存在值返回true，如果不存在则返回false。 -
remove()：从列表中删除给定的字符串。 -
toggle()：如果列表中已经存在给定的值，删除它，如果列表中没有给定的值，添加它。
- 判断是否含有某个class。
div.classList.contains('ct')
- 添加一个class
div.classList.add('ct')
- 删除一个class
div.classList.remove('ct')
捕获.PNG
