Javascript:文档对象模型

Posted 2020-10-31 qianxinyi

使用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);