dom对象的innerText和innerHTML有什么区别?
-
Element.innerText属性返回该元素包含的文本代码。该属性可读写,常用来设置某个节点的内容。
如果将该属性设为空,等于删除所有它包含的所有节点。 -
Element.innerHTML属性返回该元素包含的HTML代码。该属性可读写,常用来设置某个节点的内容。
如果将该属性设为空,等于删除所有它包含的所有节点。
elem.children和elem.childNodes的区别?
- Element.children属性返回一个HTMLCollection对象,包括当前元素节点的所有子元素。它是一个类似数组的动态对象(实时反映网页元素的变化)。如果当前元素没有子元素,则返回的对象包含零个成员。
- childNodes属性返回一个NodeList集合,成员包括当前节点的所有子节点。注意,除了HTML元素节点,该属性返回的还包括Text节点和Comment节点。如果当前节点不包括任何子节点,则返回一个空的NodeList集合。由于NodeList对象是一个动态集合,一旦子节点发生变化,立刻会反映在返回结果之中。
查询元素有几种常见的方法?ES5的元素选择方法是什么?
- ** document.getElementsByTagName**方法返回所有指定HTML标签的元素,返回值是一个类似数组的HTMLCollection对象,可以实时反映HTML文档的变化。如果没有任何匹配的元素,就返回一个空集。
- document.getElementsByClassName方法返回一个类似数组的对象(HTMLCollection实例对象),包括了所有class名字符合指定条件的元素,元素的变化实时反映在返回结果中。
- document.getElementsByName方法用于选择拥有name属性的HTML元素(比如<form>、<radio<img>、<frame>、<embed>和<object>等),返回一个类似数组的的对象(NodeList对象的实例),因为name属性相同的元素可能不止一个。
- getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。
ES5
- document.querySelector方法接受一个CSS选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。
- document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象,包含所有匹配给定选择器的节点。
但是,它们不支持CSS伪元素的选择器(比如:first-line和:first-letter)和伪类的选择器(比如:link和:visited),即无法选中伪元素和伪类。
如果querySelectorAll方法的参数是字符串*,则会返回文档中的所有HTML元素节点。另外,querySelectorAll的返回结果不是动态集合,不会实时反映元素节点的变化。
最后,这两个方法除了定义在document对象上,还定义在元素节点上,即在元素节点上也可以调用。
如何创建一个元素?如何给元素设置属性?如何删除属性
- **document.createElement **方法用来生成网页元素节点。
- Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在,则返回null。
- Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在,则相当于编辑已存在的属性。
- Element.hasAttribute方法返回一个布尔值,表示当前元素节点是否包含指定属性。
- Element.removeAttribute方法用于从当前元素节点移除属性。
如何给页面元素添加子元素?如何删除页面元素下的子元素?
-
Node.appendChild方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。
Node.appendChild**方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。 - Node.removeChild方法接受一个子节点作为参数,用于从当前节点移除该子节点。它返回被移除的子节点。注意,这个方法是在父节点上调用的,不是在被移除的节点上调用的。
- Node.replaceChild方法用于将一个新的节点,替换当前节点的某一个子节点。它接受两个参数,第一个参数是用来替换的新节点,第二个参数将要被替换走的子节点。它返回被替换走的那个节点。
- Node.insertBefore方法用于将某个节点插入当前节点的指定位置。它接受两个参数,第一个参数是所要插入的节点,第二个参数是当前节点的一个子节点,新的节点将插在这个节点的前面。该方法返回被插入的新节点。
element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
classList属性则返回一个类似数组的对象,当前元素节点的每个class就是这个对象的一个成员。该对象的length属性(只读)返回当前元素的class数量。
classList对象有下列方法。
- add():增加一个class。
- remove():移除一个class。
- contains():检查当前元素是否包含某个class。
- toggle():将某个class移入或移出当前元素。
- item():返回指定索引位置的class。
- toString():将class的列表转为字符串。
如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</btn>
</div>
<script>
var liElements = document.querySelectorAll(".mod-tabs>ul>li");
var btnElements = document.getElementsByClassName('btn');
console.log(liElements);
console.log(btnElements);
</script>