DOM操作练习

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?

1. 方法

• item() / []：取得classList属性的每一个元素。
• add()：将给定的字符串值添加到列表中，如果值已经存在，就不添加了。
• contains()：表示列表中是否存在给定的值，如果存在值返回true，如果不存在则返回false。
• remove()：从列表中删除给定的字符串。
• toggle()：如果列表中已经存在给定的值，删除它，如果列表中没有给定的值，添加它。

2. 判断是否含有某个class。

div.classList.contains('ct')

3. 添加一个class

div.classList.add('ct')

4. 删除一个class

div.classList.remove('ct')

捕获.PNG