JS-DOM-Element对象
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