- 获取文本
<div id="father">
<span id="son">孩子元素</span>
</div>
1. innerHTML获取元素内部所有内容,包含子标签
document.getElementById("father").innerHTML
结果:<span id="son">孩子元素</span>
2. innerText获取纯文本,不包含标签(所有浏览器都支持,火狐低版本不行)
document.getElementById("father").innerText
结果: 孩子元素
3. textContent获取纯文本,不包含标签,不会剔除格式信息和合并连续的空格(IE8及其以下版本不支持)
document.getElementById("father").textContent
结果: 孩子元素
- 获取样式(获取元素tag的attr属性值)
- getComputedStyle(tag,null)[attr] //IE9以上版本支持
getComputedStyle(box,null).width
- tag.currentStyle[attr] //IE8及其以下版本支持
box.currentStyle.width
- 节点的访问
firstChild 访问第一个子节点(包括换行)
firstElementChild 访问第一个子元素节点(IE低版本不支持)
lastChild 访问最后一个子节点(包括换行)
lastElementChild 访问最后一个子元素节点(IE低版本不支持)
childNodes 获取所有子节点(包括换行)
children 获取所有子元素节点(不存在兼容问题)
兄弟节点
nextSibling 获取下一个兄弟节点(包含换行)
nextElementSibling 获取下一个兄弟元素节点(IE低版本不支持)
previouseSibling 获取上一个兄弟节点(包含换行)
previouseElementSibling 获取上一个兄弟元素节点(IIE低版本不支持)
父节点(虽无兼容性,但也是节点的一个操作)
parentNode
返回节点的父节点。document.parentNode返回null,其他的情况下都将返回一个元素节点,因为只有元素节点拥有子节点,除了document外任何节点都拥有父节点。parentNode只读
- 绑定事件
addEventListener("click",function(){}) //正常浏览器(无 “on”)
attachEvent("onclick",function(){}) //IE浏览器(有 “on”)
- 解绑事件
removeEventListener("click",fun) //正常浏览器(fun是封装好的函数)
detachEvent("onclick",fun) //IE浏览器
- 取消默认事件(例子:取消a标签中的href属性的跳转)
1.return false;(比如: onclick事件中最后加上) 最长用,IE和普通浏览器都能用
2.e.preventDefault(); //正常浏览器
3.window.event.returnValue = false; //IE浏览器使用
- 阻止事件传播
1.e.stopPropagation(); //正常浏览器
2.window.event.cancelBubble = true; //IE(取消冒泡)
- 经典继承(Object.create)
var o1;
var o2 = {
name: "jack",
age: 19
}
//o1继承了o2的属性和方法,都放在放在o1的原型对象中
//o2原型中的属性和方法会放在o1的原型的原型中, 所以o1也都能访问到
备注:Object.create方法在IE8及其以下版本不支持
实现兼容的方法
if( !Object.create){
Object.create = function(obj){
function Fun(){};
Fun.prototype = obj;
var o = new Fun();
return o;
}
}
o1 = Object.create(o2);
console.log(o1);