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延迟提示框

周六练习

密码强度

 

原文地址:https://www.cnblogs.com/huangzhenhui/p/7553579.html