DOM操作

题目1: dom对象的innerText和innerHTML有什么区别?

  • innerText 返回的是元素内包含的文本内容
  • innerHTML 返回的是元素的HTML结构

题目2: elem.children和elem.childNodes的区别?

  • elem.children 返回所有元素子节点
  • elem.chidNodes 返回所有的子节点,包括文本子节点。

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

查询元素的常见方法:

  • getElementsByTagName()方法返回所有指定标签的元素
  • getElementsByName()方法选择拥有name属性的HTML元素
  • getElementById()方法返回匹配指定ID属性的元素节点
  • getElementsByClassName()方法返回一个包括了所有class名字符合指定条件的元素(类数组对象)

ES5的元素选择方法:

  • querySelector()方法返回匹配指定的CSS选择器的元素节点
  • querySelectorAll()方法返回匹配指定的CSS选择器的所有节点

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

  • createElement()方法用来生成HTML元素节点
  • getAttribute()方法用于获取元素的属性值
  • setAttribute()方法用于设置元素属性
  • removeAttribute()方法用于删除元素属性

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

  • appendchild() 方法给元素添加子元素,添加到元素末尾。
  • removechild() 方法删除元素的子元素

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

  • add(class1, class2, ...) 在元素中添加一个或多个不存在的类名。
  • contains(class) 返回布尔值,判断指定的类名是否存在
  • item(index) 返回索引值对应的元素类名。从 0 开始,在区间范围外则返回** null**。
  • remove(class1, class2, ...) 移除元素中一个或多个类名。移除不存在的类名,不会报错。
  • toggle(class, true|false) 在元素中切换类名。
  • 第一个参数为要在元素中移除的类名,并返回 false。 如果该类名不存在则会在元素中添加类名,并返回 true。 第二个是可选参数,是个布尔值用于设置元素是否强制添加移除类,不管该类名是否存在。

题目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") 或者 document.getElementsByTagName("li")
  • 选中btn元素document.querySelector(".btn") 或者 document.getElementsByClassName("btn")
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且...
    草鞋弟阅读 476评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    QQQQQCY阅读 202评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    我七阅读 442评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? 两个属性都是获取document对象的文...
    大胡子歌歌阅读 791评论 1 3
  • 日精进打卡第4日 姓名:许文艺 公司:《杭州香纯电子商务有限公司-香影》 组别:杭州《六项精进》234期努力一组 ...
    零点0608阅读 216评论 0 0