web前端 -- Day19 js基础

概念

1. 文档：document
2. 元素：页面中所有的标签，元素--element，标签--元素--对象
3. 节点：页面中所有的内容（标签，属性，文本），node
4. 根元素：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中不支持。

节点操作

1. 第一个节点和第一个元素获取的代码在IE8中可能不支持
2. 最后一个节点和最后一个元素获取的代码在IE8中可能不支持
3. 前一个节点和前一个元素获取的代码在IE8中可能不支持
4. 后一个节点和后一个元素获取的代码在IE8中可能不支持

获取任意一个父级元素的第一个子级元素

element.firstChild--->谷歌和火狐获取的是第一个子几点
element.firstChile--->IE8获取的是第一个子元素
element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持

元素创建

元素创建三种方式

1. document.write("标签的代码及内容");
   document.write("")创建元素有缺陷，如果是在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有的内容都会被干掉。
2. 对象.innerHTML="标签代码";
3. 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;
    }
}