//描述家庭族谱图,只要我们获得一个元素,就可以通过很多的属性或者方法找到页面中的任何一个元素
//一、获取元素的常用的8个方法:
// 1、document.getElementById('')
// 1、ID重复了,只获取第一个
// 2.IE6、7下不区分ID大小写
// 3.IE6、7下把表单元素name当作ID使用
// 4.内嵌式引入js放到body底部就可以直接使用元素的id操作元素
// 5.document是上下文(context),就限定获取的范围,对于这个方法的上下文只能是document;
// 2、document.getElementsByTagName('')
// 数组类
// oDiv.item(索引)/oDiv[索引]
// document是上下文,这个上下文可以换
// 3、document.getElementsByName('')
// 兼容问题:IE浏览器下只能对表单元素起作用
// 通过元素的name属性值获取一组元素(类数组)
// 4、document.body
// 获取body
// 5、document.documentElement
// 获取html
// var cw=document.documentElement.clientWidth ||document.body.clientWidth 获取当前屏幕的宽度;
// window.οnresize=function(){}监听事件
// 6、[context].getElementByClassName("")
// 通过元素的样式值来获取一组元素,在IE6~8不兼容
// 移动端常用[IE678]
// 7、document.querySelector()
// 只能获取第一个,即使有多个
// document.querySelector("#div")
// 8、document.querySelectorAll()
// 获取多个(类数组)
// document.querySelectorAll("#div a")
// document.querySelectorAll("input[type=text]")
// 二、描述家庭关系的7个属性
var oUl=document.querySelector("#ul1");
var oLi=document.querySelectorAll("#li4");
oLi=oLi[0];
// 1.childNodes 获取所以的子节点
//console.log(oUl.childNodes);
// 2.children 获取所有的元素子节点
// 节点里面有一种类型叫做元素节点?
//console.log(oUl.children);
// 3.parentNode 获取父亲节点
//console.log(oLi.parentNode);
//4.previousSibling 获取上一个哥哥节点
//console.log(oLi.previousSibling);
//5.nextSibling 获取下一个弟弟节点
//console.log(oLi.nextSibling);
//6.firstChild 获取所有子节点的第一个
//console.log(oUl.firstChild);
//7.lastChild 获取所有子节点中的最后一个
//console.log(oUl.lastChild);
//8.fristElementChild 获取所有的元素子节点中的第一个
//不兼容的
//console.log(oUl.firstElementChild);
//element 元素 node 节点
// 元素节点 文本节点 注释节点 document
// nodeType 1 3 8 9
// nodeName 大写标签名 #text #comment #document
// nodeValue null 文本内容 注释内容 null
//在标准浏览器中会把空格和Enter当作文本节点,而在IE678中不会当作节点
var oUl=document.getElementById("ul1");
console.dir(oUl.childNodes);
console.dir(oUl.children);
// 获取哥哥元素
// 获取弟弟元素
// 获取所有的哥哥元素
// 获取所有的弟弟元素
// 增加节点
// 1.document.createElement("元素标签名") 创建一个元素节点
// 2.appendChild():向指定父亲节点中添加一个子节点,并且子节点放在父亲最末尾的位置
// 父亲节点.appendChild(子节点);
// 3.insertBefore(new,old)插入指定节点前面
// 新插入的叫做new,插入谁前面的叫做old
// old.parentNode.insertBefore(new,old)
// 向这种动态创建DOM元素获取插入的方式耗费性能,在项目中能不用就不用
// 删除节点
// 1.父节点.childNodes.removeChild(子节点);
// document.body.removeChild(oDiv);
// 克隆
// 1.被克隆节点.cloneNode(deep) 克隆一份,deep默认false:只克隆大的,里面的内容不复制;true:大的和里面的所有一切复制;
// 替换
// 1.父节点.childNodes.replaceChild(new,old)
// 添加属性
// 1.节点.setAttribute() 可以在html页面代码中提出来,设置、获取、删除要统一的一套,这个在IE678不能设置class
// setAttribute("属性名","属性值")
// var oDiv=document.createElement("div");
// oDiv.id="div1";
// oDiv.style.width="100px";
// oDiv.style.height="100px";
// oDiv.style.backgroundColor="red"
// document.body.appendChild(oDiv);