JavaScript_Dom操作(增删改查)

2018-08-20 15:22
一、节点查询型API
 
document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName
document.querySelector和document.querySelectorAll:通过css选择器来查找元素,注意选择器要符合CSS选择器的规则,使用的深度优先搜索来获取元素
 
二、节点关系型api
 
1.父关系型api
 
parentNode:Element的父节点可能是Element,Document或DocumentFragment。
parentElement:与parentNode的区别在于,其父节点必须是一个Element,如果不是,则返回null
 
2.兄弟关系型api
 
previousSibling:节点的前一个节点,如果该节点是第一个节点,则为null。注意有可能拿到的节点是文本节点或注释节点,与预期的不符,要进行处理一下。
previousElementSibling:返回前一个元素节点,前一个节点必须是Element,注意IE9以下浏览器不支持。
nextSibling:节点的后一个节点,如果该节点是最后一个节点,则为null。注意有可能拿到的节点是文本节点,与预期的不符,要进行处理一下。
nextElementSibling:返回后一个元素节点,后一个节点必须是Element,注意IE9以下浏览器不支持。
 
3.子关系型api
 
childNodes:返回一个即时的NodeList,表示元素的子节点列表,子节点可能会包含文本节点,注释节点等。
children:一个即时的HTMLCollection,子节点都是Element,IE9以下浏览器不支持。
firstElementChild:第一个子节点
lastElementChild:最后一个子节点
hasChildNodes方法:可以用来判断是否包含子节点。
 
4.元素属性型api
 
setAttribute:根据名称和值修改元素的特性eg:element.setAttribute(name, value);
getAttribute返回指定的特性名相应的特性值,如果不存在,则返回null或空字符串.

相关推荐