题目1: dom对象的innerText和innerHTML有什么区别?
两个属性都是获取document对象的文本内容的。
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时,innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。其实,innerHTML 是W3C 组织规定的属性;而innerText 属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。
innerHTML.replace(/<[^>]*>/gim,"")
题目2: elem.children和elem.childNodes的区别?
childNodes 属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本,注释。
children 属性,它返回指定元素的子元素集合。它只返回HTML节点,不返回文本节点。
题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点,则返回null。这也是获取一个元素最快的方法
getElementsByClassName方法返回一个类似数组的对象(HTMLCollection类型的对象),包括了所有class名字符合指定条件的元素(搜索范围包括本身),元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。
getElementsByClassName方法的参数,可以是多个空格分隔的class名字,返回同时具有这些节点的元素。
getElementsByTagName方法返回所有指定标签的元素(搜索范围包括本身)。返回值是一个HTMLCollection对象,也就是说,搜索结果是一个动态集合,任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。
getElementsByName方法用于选择拥有name属性的HTML元素,比如form、img、frame、embed和object,返回一个NodeList格式的对象,不会实时反映元素的变化。
注意,在IE浏览器使用这个方法,会将没有name属性、但有同名id属性的元素也返回,所以name和id属性最好设为不一样的值。
querySelector和querySelectorAll,这两个方法是ES5中新增的,他们的作用就想jq的选择器一样,你可以使用像css风格那样的描述来选择所需的元素
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。
querySelectorAll方法返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。
querySelectorAll方法的参数,可以是逗号分隔的多个CSS选择器,返回所有匹配其中一个选择器的元素。
题目4:如何创建一个元素?如何给元素设置属性?如何删除属性
document.createElement()方法生成一个新的Html元素节点,接受一个参数,即要创建的元素名,返回创建的元素节点。
var div = document.createElement("div");//
elem.getAttribute()方法获取元素属性,参数为属性名称。
elem.setAttribute()方法设置元素属性,参数为两个字符串,前者为属性名称,后者为属性值。
var div = document.createElement("div");//新建元素
var attr =document.createAttribute("class");//生成一个新的属性对象class
attr.value ="warp";//设置calss属性值为"warp"
div.setAttributeNode(attr);//将attr属性对象设置给div
//或者
var div1 = document.createElement("div");//新建元素或已存在属性。
div1.setAttribute("class","warp");//用于设置元素属性class及其值"warp"
elem.removeAttribute()用于删除元素属性。
div.removeAttribute("class");
题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?
appendChild向一个元素添加子节点,追加在尾部。
var div1 = document.createElement('div');
div1.innerHTML = '我是父节点';
var div2 = document.createElement('div');
div2.innerHTML = '我是子节点';
div1.appendChild(div2);
var div3 = document.createElement("div")
div3.innerHTML = "我插队";
div1.insertBefore(div3,div1.firstChild);
insertBefore也是向一个元素添加子节点,不过可以指定添加在哪个子节点的前面,如果不指定第二个参数,会默认添加到最后,即与appendChild效果一样。
removeChild();//删除子元素
//----------------------
var div =document.getElementByTagName("div");
div.removeChild(div.childNodes[i]);//i为子元素序号
题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
add(value):将指定的字符串值添加到列表中。如果值已经存在,就不添加了。
contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false。
item(index)返回索引值对应的元素类名
remove(value):从列表中删除指定的字符串类名。
toggle(value)一个参数时,如果列表中已经存在给定的类名值,删除它,返回false;如果列表中没有给定的值,添加它,返回ture。
toggle(value1,value2)二个参数时,如果value2为turn,则添加value1类名值,如果value2为false,则删除类名值为value1的类名。
题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
//------------------------
var li = document.getElementByTagName("li");
var btn =document.getElementBycClassName("btn")
//或者
var li = document.querySelectorAll(".mod-tabs li");
var btn = document.querySelectorAll(".btn")