Element对象

    遍历元素

         获取父元素

element.parentElement

代码

var btn1 = document.getElementById(‘btn1’);

btn1.onclick = function(){

var childDiv1 = document.getElementById(‘childDiv1’);

var parentDiv = childDiv1.parentElement;

parentDiv.style.backgroundColor = ‘lightgreen’;

}

 

 

获取子元素

 

firstElementChild

获取指定标签的第一个元素

代码

var parentDiv = document.getElementById(‘parentDiv’);

var firstChild = parentDiv.firstElementChild;

firstChild.style.backgroundColor = ‘lightgreen’;

 

lastElementChild

获取指定标签的最后一个元素

代码

var parentDiv = document.getElementById(‘parentDiv’);

var lastChild = parentDiv.lastElementChild;

lastChild.style.backgroundColor = ‘lightgreen’;

 

children

获取指定标签的所有子标签

代码

var parentDiv = document.getElementById(‘parentDiv’);

var children = parentDiv.children;

 

获取兄弟元素

 

previousElementSibling

获取指定节点的前一个兄弟节点

代码

var two = document.getElementById(‘two’);

var one = two.previousElementSibling;

one.className = ‘list-group-item active’;

 

 

nextElementSibling

获取指定节点的后一个兄弟节点

代码

var two = document.getElementById(‘two’);

var three = two.nextElementSibling;

three.className = ‘list-group-item active’;

 

    操作属性

         获取属性

element.getAttribute(属性名)

代码

var one = document.getElementById(‘one’);

var titleValue = one.getAttribute(‘title’);

 

设置属性

element.setAttribute(属性名, 属性值)

代码

var one = document.getElementById(‘one’);

one.setAttribute(‘title’, ‘this is a new li element’);

var titleValue = one.getAttribute(‘title’);

 

删除属性

element.removeAttribute(属性名)

代码

var one = document.getElementById(‘one’);

one.removeAttribute(‘title’);

var titleValue = one.getAttribute(‘title’);

 

 

判断是否包含

element.hasAttribute(属性名)

代码

var one = document.getElementById(‘one’);

var result = one.hasAttribute(‘title’);

 

    获取或更新文本

 

nodeValue

textNode.nodeValue

代码

var one = document.getElementById(‘one’);

var text = one.firstChild.nodeValue;

 

innerText

代码

var one = document.getElementById(‘one’);

var text = one.innerText;

console.log(text);

 

解决IE8及之前浏览器兼容问题

textContent

代码

var one = document.getElementById(‘one’);

var text = one.textContent;

console.log(text);

 

innerText 与 textContent 属性的区别

 

innerText

不能获取被CSS样式隐藏的文本内容

Firefox不支持

 

textContent

可以获取全部文本内容

IE8及之前不支持

自由主题

获取或更新HTML

可以通过innerHTML属性获取或更新HTML页面

的指定标签所包含的HTML代码内容

注意:

存在安全问题,不要操作用户输入的内容

代码

var one = document.getElementById(‘one’);

var content = one.innerHTML;

content = ‘<span class=”badge”>14</span>’ + content;

one.innerHTML = content;4

打赏

发表评论

邮箱地址不会被公开。 必填项已用*标注