10个div点击一个div变绿色,其他都为红色,立即执行函数包裹代码防止全局变量产生
选取对象集合
如何实现,给每个div添加事件,循环这个对象集合
(在点击的这个div的时候做判断,判断当前的这个div是否是红色,如果是红色就变为绿色,
把所有div变成绿色,再把当前点击的这个div变成红色(所有div的点颜色赋值为绿色,点击的style的背景颜色赋值为红色)
再点击红色的时候把红色再次变为绿色,把当前div变成绿色
方法二:添加类名的方式
操作元素内容:
innerHTML 设置或获取标签当中的内容( 识别HTML )设置或转换成字符串,保存到innerHTML中去 赋值的话会修改标签中的内容:div.innerHTML = ‘hello,world‘按照标签的写法写的话就会是一个标准的标签
innerContent(ie浏览器中中无法使用,ie中没有这个属性)常规浏览器获取纯文本
innerText ie浏览器中使用这个,获取纯文本
以下判断是否是ie浏览器
if(div.textContent !== undefined){
var text = div.textContent;
}else{
var text = div.innerText;
}
alert(text)
【不能再判断中使用函数】
css层叠样式表
document.styleSheets回样式表的集合
document.styleSheets[index].rules 返回样式表中选择器的集合
document.styleSheets[index].rules[index].style.attr查找样式表中的样式属性(ie chrom
元素最终的样式
来获取当前对象的最终样式:window.getComputedStyle(object,null).attr ( W3C )
获取当前对象的尺寸:clientWidth/clientHeight: 元素可视部分的高度和宽度(width + padding) ,也就是包含了padding,不包含border、margin
offsetWidth/offsetHeight: 元素实际的高度和宽度(width+padding+border),也就是包含border和padding
DOM(稳当对象模型 标签里面的文本也会看成一个节点
节点的关系,类似家族有父节点和子节点,但是子节点不一定会有,比如文本就不会有子节点
如何获取节点对象:
通过元素获取节点的四种方式:
document.getElementById("elementID");获取标签元素节点
document.getElementsByTagName("tagname");标签名的对象的集合
document.getElementsByName("name");名称的对象的集合
document.getElementsByClassName("classname");类名的元素集合
元素节点是可以直接获取的
somNode.parentNode任何节点的父节点都可以是这个表示,当前节点的父节点
childNode 子节点 包含所有节点,文本节点也包含在内的,比如空格为txt节点
children 只包含标签节点,不包含text节点
firstchild 当前元素的所有子节点中的第一个子节点 打印第一个子节点firstchild[],括号里写角标
获取最后一个子节点 lastChild
nextSibling获取兄弟节点 换行符
操作节点: 以下四个方法属于父元素的方法,都是剪切过去的
appendChild添加子元素
appendChild把标签插入到另一个标签的子元素的末尾
var div = document.getElementById("div");
var p = document.getElementById("p");
div.appendChild(p)
insertbefore(childNode,nextNode)——要插入的节点,参照的节点,同一个节点只能在dom树中出现一次,之前位置就没有了 如果第二个参数为null的话,默认添加到末尾(剪切操作
replaceChild(p,select);替换节点(剪切操作
removeChild移除节点
$0
sources 断点调试
cloneNode(isDeepcopy) 属于复制的方法 isDeepcopy:深度复制,当isDeepcopy的值是true则是一个深度复制,当isDeepcopy的值是fluse则是一个浅度复制
deeplist.
document.createElement(tagName)通过标签名创建一个元素节点。接受一个字符串参数,这个字符串即为标签名字