DOM操作

1.dom对象的innerTextinnerHTML有什么区别?

  • innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容。
  • innerHTMLinnerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM。

2.elem.childrenelem.childNodes的区别?

  • elem.children只返回HTML元素节点。
  • elem.childNodes返回所有的子节点,包括HTML元素,属性,文本。

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

常见方法:getElementById查询指定ID属性的元素节点;getElementsByClassName查询一个包括了所有class名字符合指定条件的元素(类数组对象);getElementsByTagName查询所有指定标签的元素;
getElementsByName查询拥有name属性的HTML元素。
ES5的元素选择方法:querySelector()返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null;
querySelectorAll()返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。


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

createElement()创建元素,

var newDiv = documment.createElement("div");

setAttribute()设置元素属性,

var newDiv = documment.createElement("div");
newDiv.setAttribute("my_attrib", "newVal");

removeAttribute()删除元素属性,

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "newVal");
newDiv.removeAttribute("id");

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

appendChild()在元素末尾添加元素;
insertBefore()在某个元素前插入元素;
removeChild()删除子元素。


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

element.classList有add,remove,toggle,contains等方法。用contains判断是否拥有class,用add添加一个class,用remove删除一个class。


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

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

推荐阅读更多精彩内容

  • 基本介绍 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且...
    草鞋弟阅读 495评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    QQQQQCY阅读 211评论 0 0
  • 1、 dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元素内...
    zh_yang阅读 342评论 0 0
  • 题目1: dom对象的innerText和innerHTML有什么区别? innerText是一个可写属性,返回元...
    Taaaaaaaurus阅读 224评论 0 1
  • 今天我上课了,不是大课堂,是一对一英语课,其实已经跟他上了3次课,每次2小时。接触时间不算多,但是这个男孩子给我的...
    Lisa1125阅读 208评论 0 0