js中获取元素的方法
document.getElementById() 通过ID来获取一个元素
getElementById的上下文只能是document
1、理论上一个页面中的ID是唯一的,但是可能由于误操作写重复了,浏览器不会认为这是报错,此时通过getElementById获取的只是第一个
2、在IE6\7中会把表单元素的name值也当做ID,所以以后开发过程中表单的name不要和ID重复
3、在IE6\7下不区分ID的大小写,所以以后在开发过程中不要用大小写区分ID
4、我们可以不通过getElementById获取,直接的写id也代表当前的这个元素(但是不推荐这么写)
document.getElementsByTagName() 通过标签名来获取一组元素
document是当前获取的范围(我们称之为上下文 context),并且这个getElementsByTagName方法的上下文不固定,不一定是document
document.getElementsByName() 通过name属性的值来获取一组元素,在IE浏览器下默认只有表单元素才天生自带name属性,所以在IE浏览器下getElementsByName只对表单元素起作用
getElementsByName的上下文只能是document
document.getElementsByClassName() 通过class属性的值(类名)来获取一组元素,此方法在IE6~8浏览器下不兼容
这个方法的上下文可以不是document
document.documentElement 获取整个HTML
document.body 获取整个body
document.head 获取整个head
获取当前屏幕的高度和宽度
var cw = document.documentElement.clientWidth || document.body.clientWidth;//顺序不要变
var ch = document.documentElement.clientHeight || document.body.clientHeight;
console.log(cw,ch);
基本上我们都是在移动端使用这两个方法:因为不兼容IE6~8
document.querySelector() 获取一个元素
document.querySelectorAll() 获取多个元素
Node:节点
节点分类 nodeType nodeName nodeValue
元素节点 1 大写标签名 null
文本节点(text) 3 #text 文字内容
注释节点(comment) 8 #comment 注释内容
document 9 #document null
在标准浏览器(非IE6~8)中,浏览器会把空格和换行都当做文本节点来处理
childNodes:获取所有的子节点
children:获取所有的元素子节点 节点中包含元素节点和注释节点
parentNode:获取父亲节点
previousSibling:获取上一个哥哥节点
nextSibling:获取下一个弟弟节点
firstChild:获取大儿子
lastChild:获取小儿子
DOM增、删、改
增加创建:
创建一个元素节点:createElement
var oDiv = document.createElement("div");
oDiv.id = "div1";
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.backgroundColor = "red";
oDiv.innerHTML = "珠峰培训";
我需要把创建的元素节点添加到我们的页面中(body中):appendChild
document.body.appendChild(oDiv);
appendChild:添加到指定元素中最末尾的位置
克隆一个和oDiv一模一样的:cloneNode(true/false) true:把当前的元素和它的子子孙孙都克隆 false:只克隆当前自己(默认值)
var oDiv2 = oDiv.cloneNode(true);
oDiv2.id = "div2";
oDiv2.style.backgroundColor = "yellow";
insertBefore:添加到指定的容器中某一个元素之前 要增加的新元素newEle,添加到谁之前oldEle
oldEle.parentNode.insertBefore(newEle,oldEle)
oDiv.parentNode.insertBefore(oDiv2, oDiv);
document.body.insertBefore(oDiv2, oDiv);
document.body.removeChild(oDiv); removeChild删除指定的元素
设置自定义属性,可以在HTML结构上看到的
oDiv2.setAttribute("zhuFeng","珠峰");
console.log(oDiv2.getAttribute("zhuFeng"));
oDiv2.removeAttribute("zhuFeng");
这种方式在IE6~8下不能设置class的值