排他思想
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++)
{
btns[i].onclick = function(){
//清除所有人的 类名 只能用 for 遍历
for(var j=0;j<btns.length;j++)
{
btns[j].className = "";
}
//就剩下自己 就是一个 而且是点击那个
this.className = "damao";
}
}
}
</script>
节点
父节点
父 : parentNode 亲的 一层
兄弟节点
nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的
previousSibling 同理 上一个兄弟
previousElementSibling
我们想要兼容 我们可以合写
var div = one.nextElementSibling || one.nextSibling;
必须先写 正常浏览器 后写 ie678
子节点
算换行
firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var one.firstElementChild || one.firstChild;
lastChild
lastElementChild
孩子节点
childNodes 选出全部的孩子
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (嫡出)
火狐 谷歌等高本版会把换行也看做是子节点
利用 nodeType == 1 时才是元素节点 来获取元素节点
标签 元素
children 重要 选取所有的孩子 (只有元素节点)
这个更好 跟喜欢它 。 (庶出)
ie 678 包含 注释节点 这个要避免开。
dom 的节点操作
创建节点
var div = document.creatElement(“li”);
上面的意思就是 生成一个新的 li 标签
插入节点
1. appendChild(); 添加孩子 append 添加的意思
意思: 添加孩子 放到盒子的 最后面。
2. insertBefore(插入的节点,参照节点) 子节点 添加孩子
写满两个参数
demo.insertBefore(test,childrens[0]);
放到了第一个孩子的前面
如果第二个参数 为 null 则 默认这新生成的盒子放到最后面。
demo.insertBefore(test,null);
移除节点
removeChild() 孩子节点
var da = document.getElementById("xiongda");
demo.removeChild(da);
克隆节点
cloneNode(Boolean clone);
复制节点
括号里面可以跟参数 , 如果 里面是 true 深层复制, 除了复制本盒子,还复制子节点
如果为 false (默认) 浅层复制 只复制 本节点 不复制 子节点。