DOM操作HTML元素属性 

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

 

posted @ 2015-08-29 23:39  清风自来_Jason  阅读(205)  评论(0)    收藏  举报