文档对象模型

使用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)可以通过他们来获取或更新classid属性

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

阅读更多
博主设置当前文章不允许评论。

博主推荐

换一批

没有更多推荐了,返回首页