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

    周六练习

    密码强度

     

  • 相关阅读:
    《大型网站技术架构》读后感
    质量属性
    课堂作业02
    课堂作业01
    《软件构架实践》读后感06
    《软件构架实践》读后感05
    Storm系列三: Storm消息可靠性保障
    Storm系列二: Storm拓扑设计
    Storm系列一: Storm初步
    网络层协议
  • 原文地址:https://www.cnblogs.com/huangzhenhui/p/7553579.html
Copyright © 2020-2023  润新知