学习记录---api03---获取元素节点 获取元素的兼容性代码 元素的相关操作 为元素绑定多个事件

节点：页面中的所有内容（标签，属性，文本（文字，换行，空格，回车）），node

节点的属性：（可以使用标签–元素.出来，可以使用属性节点.出来，文本节点.出来）

nodeType:节点类型，返回：1-------标签，2---------属性，3------文本
nodeName:节点名字，返回：标签节点----大写的标签名字，属性节点-----小写的属性名字,文本节点-----#text
nodeValue:节点的值：标签节点–null，属性节点----属性值，文本节点-----文本内容
父子节点 兄弟节点

---

获取元素和节点

---

获取标签的父级节点
parentNode

---

获取标签的父级元素
parentElement
以上两个基本相同

---

子节点
childNodes

---

子元素
children

---

节点比元素多，因为子节点包括换行，空格

getAttributeNode 获取的是节点
例子

var node=getAttributeNode(‘id’); //获取的是属性节点
console.log(node.nodeType+’-------’+node.nodeName+’-------’+node.nodeValue);

输出：2--------id-------dv

---

获取第一个子节点
父级document.firstChild

---

获取第一个子元素
父级document.firstElementChild

---

获取最后一个子节点
父级document.lastChild

---

获取最后一个子元素
父级document.lastElementChild

---

某个元素的前一个兄弟节点
document.getaElementById(‘某个元素的id名字’).previousSibling

---

某个元素的前一个兄弟元素
document.getaElementById(‘某个元素的id名字’).previousElementSibling

---

某个元素的后一个兄弟节点
document.getaElementById(‘某个元素的id名字’).nextSibling

---

某个元素的后一个兄弟元素
document.getaElementById(‘某个元素的id名字’).nextElementSibling

以上属性在ie8中，获取的节点属性在ie8中获取的是元素，获取的元素属性不支持

总结:
凡是获取节点和元素的代码在谷歌和火狐中得到的都是 相关的节点和相关的元素
从子节点和兄弟节点开始，凡是获取节点的代码在ie8中得到的是元素，获取元素的相关代码，在ie8中得到的是undefined—ie8不支持

---

获取元素的兼容代码

function my$(id) {
            return document.getElementById(id);
        }
//获取的节点属性在ie8中获取的是元素，获取的元素属性不支持
// 获取第一个子元素的兼容写法
function getFirstChild(element) {
    if (!element.firstElementChild) {
        var node = element.firstChild;
        while (node&&node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
    else {
        return element.firstElementChild;

    }
}
// 获取z最后一个子元素的兼容写法
function getLastChild(element) {
    if (!element.lastElementChild) {
        var node = element.lastChild;
        if (node.nodeType == 1 && node.nodeName == 'LI') {
            node = node;
        }
        else {
            node = node.previousSibling;
        }
        return node;
    }
    else {
        return element.lastElementChild;
    }
}
// 获取任意节点的前一个元素的兼容写法
function getBeforeChild(element) {
    if (!element.previousElementSibling) {
        var last = element.previousSibling;
        while(last&&last.nodeType != 1) {
            last = last.previousSibling;
        }
        return last;
    }
    else {
        return element.previousElementSibling;
    }
}
// 获取任意节点的后一个元素的兼容写法
function getNextChild(element) {
    if (!element.nextElementSibling) {
        var next = element.nextSibling;
        while (next&&next.nodeType != 1 ) {
            next = next.nextSibling;
        }
        return next;
    }
    else {
        return element.nextElementSibling;
    }
}

元素创建的三种方式

document.write(‘标签的代码及内容’);
创建元素，缺陷：如果是在页面加载完毕后，此时通过这个当时创建元素，出来这个元素，其他代码全部被删除
页面加载时创建，不会影响其他代码

可以嵌入外部网站的代码和地址

---

对象.innerHTML=‘标签的代码及内容’; 返回的是字符串
可以在某个标签中创建标签，不会对其他标签造成影响，如果是点击事件的话，点击后会重新为创建的标签赋值
若是在body中创建会和document.write(‘标签的代码及内容’);一样的效果

---

document.createElement('标签的名字 '); 返回的是对象
创建元素，再把元素追加（appendChild(element)）到父级元素中
追加可以添加多个元素进入父级元素

var liObj=document.createElement('li');
    ulObj.appendChild(liObj);

元素的相关方式

---

父元素.insertBefore(元素，某个元素)------将元素拆入道某个元素的前面

---

父元素.replaceChild(元素，某个元素)-----将元素替换某个元素

---

父元素.removeChild(存在的元素)--------移出父级元素的子元素–一次只能删一个

---

删除父级元素中的所有元素
while(父元素.firstElementChild)–判断是否有第一个子元素，有就删除
父元素.removeChild(存在的元素)-循环

只创建一个子元素

//方法一：有则删除，无则创建

 function my$(id) {
 	document.getElementById(id);
 }	
 if (my$('btn2')) {
        my$('dv').removeChild(my$('btn2'));
    }
    var inpObj = document.createElement('input');
    inpObj.value = '按钮' + i;
    inpObj.type = 'button';
    inpObj.id = 'btn2';
    my$('dv').appendChild(inpObj);
//这个方法会将之前的删除，视觉显示是创建一个，但是每次点击按钮都是创建了新的按钮，删除了旧的按钮

---

//方法二
if (!my$('btn2')) {
    var inpObj = document.createElement('input');
    inpObj.value = '按钮' + i;
    inpObj.type = 'button';
    inpObj.id = 'btn2';
    my$('dv').appendChild(inpObj);
}

只创建一个，有了之后不再创建，显示永远是最先创建的那个

---

为元素绑定多个事件

DOM :一种，但是不兼容有两种

对象.addEventListener(参数1,参数2,参数3)—ie8不支持–对象的一个方法
参数1:事件的类型–事件名字-没有on–String
参数2:事件处理函数(匿名函数，命名函数)
参数3:布尔类型，目前就写false
例子：

console.log(my$('btn'));
my$('btn').addEventListener('click',
    function () {
        console.log('我是第一个绑定的事件');
    }, false);
    -------
    添加几个事件，就写几个这个函数
    ---
my$('btn').addEventListener('click',
    function () {
        console.log('我是第二个绑定的事件');
    }, false);

对象.attachEvent(参数1，参数2)—只有ie8支持–对象的一个方法
参数1:事件类型----事件名字，有on
参数2:事件处理函数

---

补充：函数和方法的区别
函数可以直接调用
方法需要通过对象进行调用
所以函数和方法可以重名