使用DOM树
一、访问元素
1、选择单个元素节点
（1）getEelementById（）
使用元素的id属性
（2）使用CSS选择器，返回第一个匹配的元素
querySelector（）
VarhotItem=document.querySelectorAll(‘li .hot");
2、选择多个元素
(1)选择所有在class属性中使用了特定值的元素
getElementByClassName()
(2) 选择所有使用了指定标记的元素
getElementByTagName()
(3)使用CSS选择器来选择所匹配的元素
querySelectorAll()
3、在元素节点的遍历
(1)选择当前元素节点的父节点
parentNode()
(2) 选择DOM树中的前一个或下一个兄弟节点
previousSibling/nextSibling
(3) 返回当前元素的第一个或 最后一个子节点
firstChild/lastChild
二、操作这些元素
1、访问或更新文本节点
使用文本节点唯一的属性nodeValue从元素中获取文本
2、 操作html内容
（1）有一个属性可以访问子元素和文本内容
innerHTML
（2）另一种属性仅访问文本内容
textContent
（3）还有一些方法可以用来创建新的节点，将节点添加到树中或从树中移除节点
createElement()
createTextNode()
appendChild()
removeChild()
3、访问或更新属性值
（1）可以通过他们来获取或更新class和id属性
className/id
（2）第一个用来检查属性是否存在，第二个用来获取属性值，第三个用来更新属性值，第四个用来移除属性值
hasAttribute（）
getAttribute()
setAttribute()
removeAttribute()
三、NodeList:返回多个元素的DOM查询
以下4个不同的DOM查询，都返回一个NodeList
getElementsByTagName()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
四、循环遍历NodeList
For(vari=0;i<hotItems.length;i++)
{
hotItems[i].className=‘cool‘;
}
遍历DOM
parentNode
如果你从第一个<li>元素开始，那么它的父节点是<ul>元素
previousSibling、nextSibling
这两个属性找到当前节点的前一个或后一个兄弟节点（如果存在的话)
firstChild、lastChild
这两个属性找到当前元素的第一个或最后一个子节点
五、前后兄弟节点
VarstartItem =document.getElementById(‘two‘);
VarprevItem=startItem.previousSibling;
VarnextItem =startItem.nextSibling;
prevItem.className=‘complete‘;
nextItem.className=‘cool‘;
六、第一个和最后一个字符
VarstartItem =document.getElementsByTagName(‘ul‘)[0];
VarfirstItem=startItem.firstChild;
VarlastItem=startItem.lastChild;
firstItem.setAttribute(‘class‘,‘complete‘);
lastItem.setAttribute(‘class‘,‘cool‘);
七、如何获取/更新元素内容
文本节点
nodeValue:访问节点文字 //使用nodeValue属性时，必须在文本节点上操作，而不是在包含文本的元素节点上的操作
innerHTML:获取、设置文本和标签
textContent:仅获取、设置文本
innerText:仅获取、设置文本
八、使用DOM操作添加元素
VarnewE1=document.createElement(‘li‘);
VarnewText=document.createTextNode(‘quinoa‘);
newE1.appendChild(newsText);
Varposition =document.getElementsByTagName(‘ul‘)[0];
Position.appendChild(newE1);
九、使用DOM操作移除元素
VarremoveE1=document.getElementsByTagName(‘li‘)[3];
VarcontainerE1=removeE1.parentNode;
containerE1.removeChild(removeE1);
十、属性节点
getAttribute():获取属性值
hasAttribute():检查元素节点是否包含特定属性
setAttribute():设置属性值
removeAttribute():从元素节点移除属性
className:获取或设置class属性的值
id:获取或设置id属性的值
十一、检查一个属性并获取他的值
VarfirstItem=document.getElementById(‘one‘);
If(firstItem.hasAttribute(‘class‘)){
Var attr=firstItem.getAttribute(‘class‘);
Vare1=document.getElementById(‘scriptResults‘);
e1.innerHTML=‘<p>Thefirst item has a class name:"+attr+‘</p>‘;
十二、创建属性并更改其值
VarfirstItem= .getElementById(‘one‘);
firstItem.className=‘complete‘;
VarfourthItem=document.getElementsByTagName(‘li‘).item(3);
E12.setAttribute(‘class‘,‘cool‘);
十三、移除属性
VarfirstItem =document.getElementById(‘one‘);
If(firsttIteem.hasAttribute(‘class‘))
{
firstItem.removeAttribute(‘class‘);
}
十四、不同的事件类型
FunctioncheckUsername()
{…}
FunctiontipUsername()
{…}
Vare1=document.getElementById(‘username‘);
Vare1Msg=document.getElementById("feedback‘);
E1.addEventListener(‘focus‘,tipUsername,false);
E1.addEventListener(‘blur‘-,checkUsername,false);
原文地址：https://www.cnblogs.com/qianxinyi/p/8847681.html