DOM操作

作者: 柚丶稚橙熟时 | 来源:发表于2017-06-09 11:58 被阅读0次

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

    innerText指的是元素内文本元素,不包括标签元素。
    innerHTML 包括元素内标签和文本元素。

    elem.children和elem.childNodes的区别?

    dom选取页面元素对象的子对象时
    children 选取不包括空白节点
    而childNodes在firefox会选取空白节点

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

    elem.getElementById("id");
    elem.getElementsByClassName("ClassName");
    elem.getElementsByTagName("TagName");
    
    elem.querySelector(""); //返回第一个选中的元素
    elem.querySelectorAll(""); //返回所有选中的元素
    

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

    var oImg = document.createElement("img"); //创建一个元素
    oImg.setAttribute("src","xxx"); //给元素设置属性
    oImg.removeAttribute("src"); //删除属性
    

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

    document.body.appendChild(oImg); //添加子元素
    document.body.removeChild(oImg); //删除子元素
    

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

    element.classList.toggle()  //切换class
    
    element.classList.containes('className')  //true包括,false不包括
    
    element.classList.add('className') //添加一个class
    
    element.classList.remove('className') //删除一个class
    

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

    <div class="mod-tabs">
       <ul>
           <li>list1</li>
           <li>list2</li>
           <li>list3</li>
       </ul>
       <button class="btn">点我</button>
    </div>
    
    <script>
      document.querySelectorAll(".mod-tabs li"); //选中所有的li元素
      document.getElementsByClassName("btn"); //选中btn元素
    </script>
    

    相关文章

      网友评论

          本文标题:DOM操作

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