1.dom对象的innerText
和innerHTML
有什么区别?
-
innerText
是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容。 -
innerHTML
innerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM。
2.elem.children
和elem.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元素。