03day学习WenApi第三天

学习目标

一、节点的介绍

元素:页面中所有的标签,元素---element,  标签----元素---对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
根元素:html标签

二、节点的相关的属性

节点的属性：(可以使用标签-->元素.出来,可以使用属性节点.出来,文本节点.出来)
nodeType:节点的类型:1-->标签,2-->属性,3-->文本
nodeName:节点的名字:标签节点-->大写的标签名字,属性节点-->大写的属性名,文本节点-->#text
nodeValue:节点的值: 标签节点-->null,属性节点-->属性值,文本节点-->文本内容

三、节点的属性

查看元素的父级节点: 元素.parentNode     docuemnt--->html--->body
获取属性的节点：     元素.getAttributeNode("属性名")
获取父元素的子节点:    元素.childNodes    (拆欧的)
获取父元素的子元素:    元素.children		 (邱准)

三、获取相关的节点

12行代码：都是获取节点和元素的

	// ul
    var ulObj=document.getElementById("uu");
    //父级节点
    console.log(ulObj.parentNode);
    //父级元素
    console.log(ulObj.parentElement);
    //子节点
    console.log(ulObj.childNodes);
    //子元素
    console.log(ulObj.children);

-------------------------------------------------------------------------

    //第一个子节点
    console.log(ulObj.firstChild);
    //第一个子元素
    console.log(ulObj.firstElementChild);
    //最后一个子节点
    console.log(ulObj.lastChild);
    //最后一个子元素
    console.log(ulObj.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不支持

四、字符串里需要拼接变量

注意事项：字符串里需要拼接变量需要用+号来进行拼接

拼接变量如果外面是单引号里面就用单引号拼接，如果是双引号里面就由双引号拼接。

如果里面纯字符串,没有任何变量:如果外双引号则内单引号,外单内双

 document.body.style.backgroundImage = "url("+this.src+")";

五、创建元素

创建元素的三种方式：

1、document.write("标签的代码及内容");
缺陷:如果是在页面加载完毕后,通过这个方式创建元素,那么页面上存在的内容全部被干掉了
2、对象.innerHTML="标签及代码";
3、document.createElement("标签的名字");返回一个对象
将创建的对象追加到父元素里:要追加的父级元素.appendChild(创建的对象);

六、循环遍历添加事件处理函数注意事项

如果是循环的方式添加事件,推荐使用命名函数(节省空间)

如果不是循环的方式添加事件,推荐使用匿名函数

七、元素的相关方法

1、追加元素：要追加的父级元素.appendChild(“创建的元素”);

2、将新的子元素插入到第一个子元素的前面：

插入元素： 父级元素.inerstBefore(新的子级对象,参照的子级对象);

3、将新的子元素替换到第一个子元素的前面：

替换元素：父级元素.replaceChild(obj,父级元素.firstElementChild);

4、删除父级元素的第一个子级元素

移除元素: 父元素.removeChild(“要干掉的子级元素对象”);

技巧:点击按钮删除div中的所有子级元素

document.getElementById("btn").οnclick= function () {        
//判断父级元素中有没有第一个子级元素    
while(父级元素.firstElementChild){        my$("dv").removeChild(my$("dv").firstElementChild);    
	}
}

八、为元素绑定多个事件

为元素绑定事件(DOM):一种,但是不兼容,有两种

1、对象.addEventListener(“事件类型”,“事件处理函数”,false);---->谷歌火狐支持,IE8不支持,IE11支持

参数1:事件的类型--->事件的名字,没有on
参数2:事件处理函数-->函数(命名函数,匿名函数)
参数3:布尔类型,目前就写false

2、 对象.attachEvent(“有on的事件类型”,事件处理函数)—>谷歌不支持,火狐不支持,IE8支持,IE11不支持

参数1：事件类型--->事件名,有on
参数2:事件处理函数--->函数(命名函数,匿名函数)

3、兼容代码,浏览器都支持

为任意元素,绑定任意的事件参数：任意的元素,事件的类型,事件处理函数

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;
        }
    }

九、只创建一个元素

 		//判断如果没有当前元素
        if(!document.getElementById("btn"){
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            input.id="btn2";
            document.getElementById("div").appendChild(input);
        }
    }

十、点击按钮创建列表

var names = ["杨过", "郭靖", "张三丰", "张无忌", "小龙女", "彭于晏"];
    document.getElementById("btn").onclick = function () {
        var str = "<ul style='list-style-type: none;cursor: pointer'>";
        //根据循环遍历创建对应数的li
        for (var i = 0; i < names.length; i++) {
            str += "<li>" + names[i] + "</li>";
        }
        str += "</ul>";
        document.getElementById("dv").innerHTML = str;
        //添加高亮显示,代码执行到这里,li已经有了
        //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
        var list = document.getElementById("dv").getElementsByTagName("li");
        console.log(list);
        for (var i = 0; i < list.length; i++) {
            //鼠标进入事件
            list[i].onmouseover = function () {
                this.style.backgroundColor = "yellow";
            }
            //鼠标离开事件
            list[i].onmouseout = function () {
                this.style.backgroundColor = "";
            }
        }
    }

十一、兼容代码

1、根据id的值获取相对应的元素/对象

​ 调用的时候直接:myObj(“id属性的值”);

function myObj(id) {
  return document.getElementById(id);  
}

2、获取任意元素的中间的文本内容

function getInnerText(elelment){
    if(typeof element.textCount=="undefined"){
        return element.innerText;
    }elsr{
        return element.textCount;
    }
}

3、设置任意元素的任意文本内容

function serInnerText(element,text){
    if(typeof element.textCount=="undefined"){
        element.innerText=text;
    }else{
        element.textCount-text;
    }
}

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

function getFirstElementChild(element){
    if(element.firstElementChild){//
        
    }
}