<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作HTML元素属性</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
PS:想要操作元素就必须先获取元素：
getElementsByTagName(‘标签名称‘)
getElementById(‘元素ID‘)
getElementByClassName(‘类名称‘) //HTML5新增的DOM API
1, 操作属性的方式
1) obj.style.属性名称 = ‘值‘;
oDiv.style.display = ‘block‘;
2) obj.style[‘属性名称‘] = ‘值‘;
oDiv.style.[‘display‘] = ‘block‘;
3) DOM方式：利用js提供的各种DOM属性和方法操作HTML节点
2, DOM方式操作元素属性
获取属性值：getAttribute(名称)
设置属性并赋值：setAttribute(名称, 值)
删除属性: removeAttribute(名称)
3, childNodes属性元素的子节点集合(元素节点=1, 属性节点=2, 文本节点=3)
childNodes.length 获取子元素个数
var list = document.getElementsByTagName(‘ul‘)[0];
for(var i = 0; i<list.childNodes.length; i++){
//使所有li背景为红色, 仅仅当节点类型是元素节点时
if(list.childNodes.nodeType = 1){
list.childNodes[i].style.background = ‘red‘;
}
}
4, children属性同样是元素的子节点集合(但只包含元素节点)
var list = document.getElementsByTagName(‘ul‘)[0];
for(var i = 0; i<list.childNodes.length; i++){
//因为此属性只包含元素节点, 故无须做if判断
list.childNodes[i].style.background = ‘red‘;
}
PS: childNodes属性及children属性均指第一层子节点而为包含孙级节点
5, parentNode属性表示父节点
var item = document.getElementsByTagName(‘li‘)[0];
console.log(item.parentNode); //ul
6, offsetParent属性指最近的祖先定位元素的引用
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
与CSS定位机制一样，如果其父元素没有CSS定位属性，则逐级向上(包裹元素)寻找离其最近的具有CSS定位属性的父级，如始终未找到则以body作为其定位的父元素
JS OffsetParent属性深入解析 http://www.cnblogs.com/jhxk/articles/1669680.html
7, 首尾子节点
IE6-8
firstChild属性 第一个子节点
高级浏览器
firstElementChild属性 第一个子节点
兼容浏览器处理
if (obj.firstElementChild) {
obj.firstElementChild...
}else{
obj.firstChild...
}
lastChild, lastElementChild同理
8, 前后兄弟节点
IE6-8
nextSibling属性 后一个子节点
高级浏览器
nextElmentSibling属性 后一个子节点
兼容浏览器处理
if (obj.nextElmentSibling) {
obj.nextElmentSibling...
}else{
obj.nextSibling...
}
previousSibling, previousElementSibling同理
9, 封装ClassName(), 用于获取元素的class属性集合 [基础版本BUG]
function getElementsClass(oParent, nClass){
// 1>获取页面上的所有的元素使用*通配符
var ele = getElementsByTagName(‘*‘);
// 2>用于保存获取得到的所有class
var Result = [];
// 3>筛选出所有的class, push()进数组
for (var i = 0; i < ele.length; i++) {
if (ele[i].ClassName = nClass) {
Result.push(ele[i]);
};
};
// 4>返回获取到的class集合
return Result;
}
</script>
</body>
</html>
时间： 2025-01-18 13:20:02