1、节点的相关属性
nodeType 节点的类型：返回值：1--标签 、返回值：2--属性、返回值：3--文本
nodeName 节点的名字 标签的节点--大写的标签、属性的节点--小写的属性的名字、文本节点--#text
nodeValue 节点的值 标签节点--null、属性的节点--属性的值、文本节点--文本的内容
2、获取相关的节点
获取父节点 console.log(对象.parentNode);
获取父元素 console.log(对象.parentElement);
获取子节点 console.log(对象.childNodes);
获取子元素 console.log(对象children);
获取第一个子节点console.log(对象.firstChild);
获取第一个子元素console.log(对象.firstElementChild);
获取最后一个子节点console.log(对象.lastChild);
获取最后一个子元素console.log(对象.lastElementChild);
获取元素的前一个兄弟节点console.log(对象.previousSibling);
获取元素的前一个兄弟元素console.log(对象.previousElementSibling);
获取元素的后一个兄弟节点console.log(对象.nextSibling);
获取元素的后一个兄弟元素console.log(对象.nextElementbling);
3、节点的兼容代码
element.firstChild--->谷歌和火狐获取的是第一个子几点
element.firstChile--->IE8获取的是第一个子元素
element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if(element.firstElementChild){//true--->支持
return element.firstElementChild;
}else{
var node=element.firstChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
if(element.lastElementChild){//true--->支持
return element.lastElementChild;
}else{
var node=element.lastChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
4、元素创建的三种方式
a.document.write(标签的代码及内容);
document.write创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
b.对象.innerHtml="标签及代码";
c.document.createElement("标签的名字");
*第三种创建元素的方式：创建后的元素，如果是子元素需要追加的父元素里面去
父元素对象.appendChild(子元素对象);
5、元素的相关方法
//把新的子元素插入到第一个子元素的前面
父对象.insertBefore(obj,父对象firstElementChild);
//移除父级元素中第一个子级元素
父对象.removeChild(父对象.firstElementChild);
};
6、为元素绑定多个事件
a.对象.addEventListener(事件类型,事件处理函数,false); 谷歌火狐支持的 IE不支持
b.对象.attachEvent(有on的事件类型,事件处理函数)；谷歌火狐都不支持 IE支持
*注意：
为按钮绑定点击事件
参数1:事件的类型---事件的名字,没有on
参数2:事件处理函数---函数(命名函数,匿名函数)
参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说
对象.addEventListener("click",function(){
console.log("我是元素1");
}，false);
对象.addEventListener("click",function(){
console.log("我是元素2");
}，false);
*注意：
参数1:事件类型---事件名字，有on
参数2:事件处理函数---函数(命名函数,匿名函数)
对象attachEvent("onclick",function(){
console.log("我是元素1");
});
对象.attachEvent("onclick",function(){
console.log("我是元素2");
});
7、为元素绑定多个事件兼容代码
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(对象,"click",function () {
console.log("哦1");
});
addEventListener(对象,"click",function () {
console.log("哦2");
});
