博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript之BOM+DOM(2)
阅读量:4350 次
发布时间:2019-06-07

本文共 1576 字,大约阅读时间需要 5 分钟。

目录

节点信息(属性)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

你可能感兴趣的文章
14软件G2班
查看>>
bzoj 1977 [BeiJing2010组队]次小生成树 Tree
查看>>
bzoj 2119 股市的预测——枚举长度的关键点+后缀数组
查看>>
maven:新建的maven工程需要添加一下插件
查看>>
关于iOS自定义控件:在view上实现事件和代理
查看>>
[扫描线]POJ2932 Coneology
查看>>
全局变量与全局静态变量的区别
查看>>
oo第一次作业总结
查看>>
EMC队列 发件人为空 From Address: <>
查看>>
多路复用IO模型 IO multiplexing
查看>>
升级WordPress
查看>>
蒙蒙的Git
查看>>
js方法遇到就记录
查看>>
iReport采用JDBC的方式连接Oracle
查看>>
MongoDB 数据库的可视化
查看>>
AOP中的相关概念
查看>>
监控系统信息模块psutil
查看>>
python tokenizer
查看>>
类的成员修饰符
查看>>
A - Race to 1 Again
查看>>