1、 dom对象的innerText和innerHTML有什么区别?
- innerText 指的是从起始位置到终止位置的内容,但它去除html标签。
- innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
2、elem.children和elem.childNodes的区别?
- elem.children 它返回指定元素的子元素集合。但只返回HTML节点,甚至不返回文本节点。
- elem.childNodes 它返回指定元素的子元素集合,包括HTML节点和所有属性,文本。
3、查询元素有几种常见的方法?ES5的元素选择方法是什么?
- 查询元素常见方法
- getElementById()——返回匹配指定ID属性的元素节点。
- getElementsByClassName()——返回一个类似数组的对象,包括了所有 class名字符合指定条件的元素。
- getElementsByTagName()——返回所有指定标签的元素。
- getElementsByName()——用于选择拥有name属性的HTML元素,比如form、img、frame等
- ES5元素选择方式
- querySelector()——返回匹配指定的CSS选择器的元素节点(一个)。
- querySelectorAll()——返回匹配指定的CSS选择器的所有节点。
4、如何创建一个元素?如何给元素设置属性?如何删除属性
创建元素:createElement()
设置元素属性:setAttribute(attributeName,attributeValue)
删除元素属性:removeAttribute(attributeName)
document.createElement('div')
document.getElementsByTagName('h1')[0].setAttribute('class','haha')
document.getElementsByTagName('h1')[0].removeAttribute('class','haha')
5、如何给页面元素添加子元素?如何删除页面元素下的子元素?
appendChild() //在元素末尾添加元素
insertBefore() //在某个元素之前插入元素
removeChild()方法可用于删除某元素下的子元素
replaceChild()接受两个参数:要插入的元素和要替换的元素
var newDiv = document.createElement('div')
var newText = document.createTextNode('hello')
newDiv.appendChild(newText)
document.body.appendChild(newDiv)
document.body.removeChild(newDiv)
document.body.insertBefore(newDiv,document.body.firstChild)
document.body.replaceChild(newText,newDiv)
6、element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
element.classList.add()//添加class
element.classList.item()//返回类名在元素中的索引值
element.classList.remove('')//删除class
element.classList.contains('')// 包含就是true / 没有则返回flase
element.classList.toggle('')// 有则删除返回false,没有则加上返回true
document.body.classList.add('ct','ct-1','ct-2')
document.body.classList.item(1)
document.body.classList.contains('ct-1')
document.body.classList.toggle('ct-2')
document.body.classList.remove('ct','ct-1')
7、如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
/*
document.querySelectorAll('li')
document.querySelectorAll('.btn')
document.getElementsByTagName('li')
document.getElementsByClassName('btn')
*/