<!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>