美文网首页
进阶八 DOM

进阶八 DOM

作者: 饥人谷_流水 | 来源:发表于2017-05-23 20:15 被阅读0次

    1. dom对象的innerText和innerHTML有什么区别?

    • innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容
      <div>
        <p>
            123
        <span>456</span>
          </p>
       </div>
    

    外层div的innerText返回内容是 "123456"

    • nnerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM
      <div>
         <p>
            123
            <span>456</span>
         </p>
      </div>
    

    外层div的innerHTML返回内容是 "< p >123<span>456</span>< /p>"

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

    elem.childNodes输出的内容是含有空格节点的所有子节点,
    elem.children输出的则是不含空节点的所有子节点

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

    document.getElementById("id")
    document.getElementsByClassName()
    document.getElementsByTagName()
    document.getElementsByName()
    ES5的有:
    document.querySelector()
    document.querySelectorAll()

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

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

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

    • appendChild()
      在元素末尾添加元素

    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hello");
    newDiv.appendChild(newContent);

    • removeChild()
      删除页面元素下的子元素

    parentNode.removeChild(childNode);

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

    1.

    • add( String [, String] )
      添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
    • remove( String [,String] )
      删除指定的类值。
    • item ( Number )
      按集合中的索引返回类值。
    • toggle ( String [, force] )
      当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回 false,如果不存在,则添加它并返回true。
      当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
    • contains( String )
      检查元素的类属性中是否存在指定的类值。

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

      <div class="mod-tabs">
      <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
      </ul>
      <button class="btn">点我</button>
    </div>
    

    选中li元素 document.querySelectorAll("li")
    选中btn元素document.querySelector(".btn")

    相关文章

      网友评论

          本文标题:进阶八 DOM

          本文链接:https://www.haomeiwen.com/subject/ckegxxtx.html