目录
节点信息(属性)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延迟提示框
周六练习
密码强度