js基础八

Posted 2020-08-17 oneduan

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)通过标签名创建一个元素节点。接受一个字符串参数，这个字符串即为标签名字