获取元素,获取节点详解

来源：互联网发布：电商数据分析软件编辑：程序博客网时间：2024/06/11 13:36

//描述家庭族谱图，只要我们获得一个元素，就可以通过很多的属性或者方法找到页面中的任何一个元素

//一、获取元素的常用的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.onresize=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);

0 0