进阶-任务8

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

  • innerText指元素包含的文本内容
  • innerHTML值元素包含的HTML结构

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

  • elem.children
    children属性返回一个动态的HTMLCollection集合,由当前节点的所有Element子节点组成。
  • elem.childNodes
    childNodes属性返回一个NodeList集合,成员包括当前节点的所有子节点。注意,除了HTML元素节点,该属性返回的还包括Text节点和Comment节点。

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

  • document.getElementById()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.getElementsByName()
  • ES5方法
    document.querySelector()
    document.querySelectorAll()

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

  • 创建元素
    document.createElement()
  • 给元素设置属性
    elem.setAttribute()
  • 删除属性
    elem.removeAttribute()

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

  • 添加子元素
    elem.appendChild()
  • 删除子元素
    elem.removeChild()

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

  • element.classList的方法:
    add():增加一个class。
    remove():移除一个class。
    contains():检查当前元素是否包含某个class。
    toggle():将某个class移入或移出当前元素。
    item():返回指定索引位置的class。
    toString():将class的列表转为字符串。
  • 判断包含class
    elem.classList.contains()
  • 添加class
document.getElementById('foo').className += 'bold';
document.getElementById('foo').classList.add('bold');
  • 删除class
document.getElementById('foo').classList.remove('bold');

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

var ul = document.querySelector('ul')
var liList = ul.children
var btn = document.querySelector('.btn')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText返回元素内的的文本内容...
    mhy_web阅读 455评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText: 是一个可写属性,返...
    饥人谷_一叶之秋阅读 263评论 0 0
  • 1- dom对象的innerText和innerHTML的区别 innerText是一个可写属性,返回元素内包含...
    osborne阅读 266评论 0 0
  • dom对象的innerText和innerHTML有什么区别? innerText返回元素内包含的文本内容,在多层...
    RookieD阅读 311评论 0 0
  • 《隔着马路看你》 文/刘汉皇 隔着马路看你,一块海把我们隔离一条条鲨鱼在海面穿梭,时而露出獠牙它吞噬着你的背影,让...
    刘汉皇阅读 208评论 1 2