JavaScript之BOM+DOM(2)

目录

节点信息（属性）1

应用：4

1：获取非行内样式4

2：节点计算属性5

应用：5

综合应用：5

周六练习6

 

1.自定义属性获取  

getAttribute(“属性”)。  // 获取给定的属性的值。

setAttribute(“属性”,“值”)。  // 设置或是添加属性。 

removeAttribute(“属性”)。     // 删除属性。 

 

 

2.

节点信息（属性）

   节点类型            节点名字       节点值

            nodeType(数值)      nodeName       nodeValue

元素节点         1               标签名          null   

属性节点         2               属性名         属性值

文本节点         3               #text           文本

注释节点         8               #comment      注释的文字

文档节点         9               #document       null

 

对象.childNodes  得到子节点的集合，包括空白节点。

过滤空白节点

/*

* 过滤空白节点

* */

function removeSpaceNode(eleNode) {

    var children = eleNode.childNodes;

    for(var i=0;i<children.length;i++){

        var node =  children[i];

        //nodeType == 3 文本节点

        ///^\s+$/.test(node.nodeValue)  返回 字符串是不是空格或者回车

        if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){

            eleNode.removeChild(node);

        }

    }

}

 

 

2：经过节点的关系属性来得到节点的引用。

对象.parentNode  得到父节点的引用。

对象.children    得到子节点的集合，不包含空白节点。但IE7包含首个注释节点（前面没有元素节点），IE8包含全部的注释节点。

对象.firstChild  得到第一个子节点。（IE7/8非空白节点，多是注释节点）

对象.firstElementChild  得到第一个非空白的子节点。（IE7/8不支持）

对象.lastChild   得到最后一个子节点。（IE7最后一个元素节点，IE8最后一个非空白节点，多是注释节点）

对象.lastElementChild   得到最后一个非空白的子节点。（IE7/8不支持）

对象.nextSibling 得到下个兄弟节点的引用。 （包括空白节点和注释。IE7/8包括注释节点，不包括空白节点。）

对象.nextElementSibling 得到下个兄弟节点的引用。 （IE7/8不支持）

对象.previousSibling 得到上个兄弟节点的引用。（包括空白节点和注释。 IE7/8包括注释节点，不包括空白节点。）

对象.previousElementSibling 得到上个兄弟节点的引用。（IE7/8不支持）

缺点：兼容性很差。

 

 

 

应用：

1进度条

2：隔行变色。

1：获取非行内样式

     对象.currentStyle.属性                IE   用来得到实际的样式属性。

     getComputedStyle(对象,null).属性   火狐  用来得到实际的样式属性。

注：只能获取不能设置。

//获取计算 样式

 

2：节点计算属性

offsetLeft：获取元素相对具备定位属性的父级元素的左侧偏移距离。

offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离。

offsetWidth/offsetHeight：元素实际宽度/高度。

 

应用：

1：网页换肤。

2：简易年历。

3：自动登陆勾选。

 

综合应用：

1：点击按钮换图片。

2：tab切换案例。

3：qq延迟提示框

周六练习

密码强度