DOM--MDN
1. DOM对象的innerText和innerHTML有什么区别?
innerText返回的是元素内包含的文本内容,多层次时由浅到深排序拼接内容。
innerHTML返回的是html文档结构包括文本
2. elem.children和elem.childNodes的区别?
elem.children返回的数据类型是(HTMLcollection)是元素的子元素集合,但不包括文本节点
elem.childNodes返回的数据类型(NodeList)是元素的子元素集合,包括HTML节点,所有属性,文本节点
3. 查询元素有几种常见的方法?ES5的元素选择方法是什么?
document.getElementById() :匹配指定ID属性的元素节点
document.getElementsByClasName(): 方法返回一个类似数组的对象(HTMLCollection类型的对象),包括了所有class名字符合指定条件的元素
document.getElementByTagName('')返回所有指定标签的元素
document.getElementByName('')方法用于选择拥有name属性的HTML元素
es5方法
1.querySelector()方法返回匹配指定的CSS选择器的元素节点,如document.querySelector(".myclass");
2.querySelectorAll方法返回匹配指定的CSS选择器的所有节点
4. 如何创建一个元素?如何给元素设置属性?如何删除属性
createElement(标签名)
setAttribute(tagName,value)
removeAttribute(tagName)
var newElement = document.createElement('input'); //创建
newElement.setAttribute('name','user'); //设置
newElement.removeAttribute('name'); //删除
5. 如何给页面元素添加子元素?如何删除页面元素下的子元素?
添加元素:
appendChild:在元素末尾添加元素
insertBefore:在某个元素之前插入元素
删除元素: removeChild
<ul>
<li></li>
<li></li>
</ul>
<script>
var ulnode = document.getElementsByTagName('ul')[0];
var li = document.createElement('li');
var context = document.createTextNode('hello');
li.appendChild(context);
ulnode.insertBefore(li,ulnode.firstChild);
</script>
//输出
<ul>
<li>hello</li>
<li></li>
<li></li>
</ul>
//删除
ulnode.removeChild(li);
6. element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
classList这个属性用于返回元素的类名,作为 DOMTokenList 对象,该属性用于在元素中添加,移除及切换 CSS 类,classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。
add():添加一个类名
item(index):查找第index个类名
remove(className):删除一个类名
contains(className):是否包含指定类名,返回布尔值
let res = contans(className),通过res是否为true来判断
remove(className)
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('.mod-tabs li')
// document.querySelector('.mod-tabs btn')
//兼容ie7、8
var liList = document.getElementByTagName('li');
var btn = document.getElementByClassName('btn')[0]
location
location属性返回一个支队对象,提供了当前文档的URL信息
//假定当前网址为:http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol //"http"
document.location.host //"www.example.com:4097"
document.location.hostname //"www.example.com"
document.location.port //"4097"
document.location.pathname //"/path/a.html"
document.location.serch //"?x=111"
document.location.hash //"#part1"
documetn.location.user //"user"
document.location.password //"passed"
//跳转到另一个网址
document.location.assign('http://www.google.com')
//优先从服务器重新加载
document.location.reload(true)
//优先从本地缓存加载(默认值)
document.location.reload(false)
//跳转到另一个网址,但当前文档不保留在history对象中,
//既无法使用后退按钮,回到当前文本
document.location.assign('http://www.google.com')
//将location对象转为字符串,等价于document.location.href
document.location.toString()
虽然location属性返回的对象是只读的,但是可以将URL赋值给这个属性,网页就会自动跳转到指定网址
document.location = 'http://www.example.com';
//等价于
document.location = 'http://www.example.com';
//刷新页面
document.location.reload()