概念
- 文档：document
- 元素：页面中所有的标签，元素--element，标签--元素--对象
- 节点：页面中所有的内容（标签，属性，文本），node
- 根元素：html标签
节点
节点的属性：可以使用标签 -- 元素.出来；可以使用属性节点.出来，使用文本.出来。
nodeType:节点类型1--标签；2--属性；3--文本
nodeName:节点的名字：标签节点--大写的标签名字，属性节点--小写的属性名字，文本节点--#text
nodeValue:节点的值：标签节点--null,属性节点--属性值，文本节点—文本
获取节点和元素常用代码
// div
var divsObj = my$("dv");
// ul
var ulsObj = my$("uu");
// 父级节点
console.log("父级节点",ulsObj.parentNode);
// 父级元素
console.log("父级元素",ulsObj.parentElement);
// 子节点
console.log("子节点",ulsObj.childNodes);
// 子元素
console.log("子元素",ulsObj.children);
console.log("=====前四个谷歌、火狐、ie 都支持======");
// 第一个子节点
console.log("第一个子节点（IE8中是第一个子元素）",ulsObj.firstChild);
// 第一个子元素
console.log("第一个子元素（IE8中不支持）",ulsObj.firstElementChild);
// 最后一个子节点
console.log("最后一个子节点",ulsObj.lastChild);
// 最后一个子元素
console.log("最后一个子元素",ulsObj.lastElementChild);
// 某个元素的前一个兄弟节点
console.log("某个元素的前一个兄弟节点",my$("three").previousSibling);
// 某个元素的前一个兄弟元素
console.log("某个元素的前一个兄弟元素",my$("three").previousElementSibling);
// 某个元素的后一个兄弟节点
console.log("某个元素的后一个兄弟节点",my$("three").nextSibling);
// 某个元素的后一个兄弟元素
console.log("某个元素的后一个兄弟元素",my$("three").nextElementSibling);
总结：凡是获取节点的代码，在谷歌、火狐得到都是相关的节点；凡是获取元素的代码，在谷歌、火狐得到的都是相关的元素；从子节点和兄弟节点开始，凡是获取节点的代码在IE8中得到的是元素，获取元素的相关代码，在IE8中得到的是undefined--元素代码，在ie8中不支持。
节点操作
- 第一个节点和第一个元素获取的代码在IE8中可能不支持
- 最后一个节点和最后一个元素获取的代码在IE8中可能不支持
- 前一个节点和前一个元素获取的代码在IE8中可能不支持
- 后一个节点和后一个元素获取的代码在IE8中可能不支持
获取任意一个父级元素的第一个子级元素
element.firstChild--->谷歌和火狐获取的是第一个子几点
element.firstChile--->IE8获取的是第一个子元素
element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
元素创建
元素创建三种方式
- document.write("标签的代码及内容");
document.write("")创建元素有缺陷，如果是在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有的内容都会被干掉。 - 对象.innerHTML="标签代码";
- document.createElement("标签的名字");
// 第三种方式创建元素 document.createElement("标签的名字");
// 在把元素追加到父级元素中
my$("btn4").onclick = function(){
// 只创建一个元素：有则删除，无则创建
// 判断这个元素是否存在
console.log("元素是否存在",my$("p1"));
if (!my$("p1")) {
// my$("dv").removeChild(my$("p"));
// 创建元素
var pObj = document.createElement("p");
pObj.id="p1";
setInnerText(pObj,"添加p标签到父级元素中");
// 把创建好的子元素追加到父级元素中
my$("dv").appendChild(pObj) ;
}
总结：什么时候用命名函数，什么时候用匿名函数
如果是循环的方式添加事件，推荐用命名函数
如果不是是循环的方式添加事件，推荐用匿名函数
为元素绑定多个事件
为元素添加多个事件 addEventListener(); 该方法谷歌火狐支持，IE8不支持
对象.addEventListener("事件类型",事件处理函数,false);
参数1：事件类型 -- 事件的名字，没有on
参数2：事件处理函数 -- 函数（命名函数、匿名函数）
对象.attachEvent(); 该方法IE8支持，谷歌火狐不支持 -- 为元素添加多个事件
对象.attachEvent("有on事件类型",事件处理函数);
参数1：事件类型 -- 事件的名字，有on
参数2：事件处理函数 -- 函数（命名函数、匿名函数）参数3：布尔类型 -- 目前之后false
// 根据id获取元素
function my$(id){
return document.getElementById(id);
}
// 设置任意元素的中间文本内容
function setInnerText(element,text){
if(typeof element.textContent == "undefined"){
element.innerText = text;
}else{
element.textContent = text;
}
}
// 获取任意元素的中间文本内容
function getInnerText(element){
if(typeof element.textContent == "undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
// 为任意元素，绑定任意事件，任意的元素，事件类型，事件处理函数
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;
}
}
