DOM操作

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

a)innerText:获取的是选取节点里的内容,会自动过滤到HTML标签
b)innerHTML:获取的是选取节点里的全部,包括HTML标签

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

elem.children获取的节点都是element元素,而elem.childNodes获取的不仅包含element还有文本、属性、注释等

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

传统方法

document.getElementById() => 获取对应 id 的元素
document.getElementsByTagName() => 获取符合对应标签名的所有元素
document.getElementsByClassName() => 获取类的所有元素
document.getElementsByName() => 获取元素 name 属性为对应值的所有元素

ES5选择方法

document.querySelector() => 返回匹配的第一个
document.querySelectorAll() => 返回匹配的对应的所有元素

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

创建元素
document.createElement() => 创建一个指定 tag 的新元素
设置属性
element.setAttribute() => 设置指定名字属性的值
删除属性
element.removeAttribute() => 删除指定名字属性

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

添加子元素
element.appendChild() => 往对应元素的末尾添加新元素,作为其子元素
parentElement.insertBefore(new, brother) => 在父元素内,往对应元素的前面添加新元素,作为其兄弟元素
删除子元素
parentElement.removeChild(child) => 在父元素内,移除指定子元素

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

方法:
element.classList.add('active')   //新增 class
element.classList.remove('active')  //删除 class
element.classList.toggle('active')   //新增/删除切换
element.classList.contains('active')   // 判断是否拥有 class

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
var liArray = document.querySelectorAll('.mod-tabs li')
var btn = documents.querySelector('.mod-tabs .btn')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且...
    草鞋弟阅读 475评论 0 0
  • 1、 dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元素内...
    zh_yang阅读 335评论 0 0
  • 1: dom对象的innerText和innerHTML有什么区别? innerText:当使用innerText...
    进击的前端_风笑影阅读 437评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    QQQQQCY阅读 202评论 0 0
  • 1.概述 1.1DOM DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Document Ob...
    徐国军_plus阅读 404评论 0 3