JS-DOM（基础）

JS-DOM（基础）

获取元素节点

通过document对象调用
以下各种获取方法通过例子逐个进行演示

<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br>
        <br>
        <p>
            你喜欢那款单机游戏?
        </p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br>
        <br>
        <p>
            你手机的操作系统是?
        </p>
        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    </div>
    <div class="inner">
        gender:
        <input type="redio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj节点</button></div>
    <div><button id="btn02">查找所有li节点</button></div>
    <div><button id="btn03">查找name=gender的所有节点</button></div>
    <div><button id="btn04">查找#city下所有li节点</button></div>
    <div><button id="btn05">返回#city的所有子节点</button></div>
    <div><button id="btn06">返回#phone的第一个子节点</button></div>
    <div><button id="btn07">返回#bj的父节点</button></div>
    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username的value属性值</button></div>
    <div><button id="btn10">设置#username的value属性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>

常用的调用方法如下

getElementById()

-通过id属性获取一个元素节点对象

例子

查找#bj节点

//为id为btn01的按钮绑定一个单机响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function () {
    //查找#bj节点 
    var bj=document.getElementById("bj");
    //打印bj
    //通过innerHTML来获取元素内部的html代码
    alert(bj.innerHTML);
}

getElementsByTagName()

-通过标签名获取一组元素节点对象
-方法，返回当前节点的指定标签名后代节点

例子

查找所有li节点

var btn02=document.getElementById("btn02");
btn02.onclick=function () {
    //查找所有li节点
    //getElementsByTagName()可以根据标签名来获取一组元素节点对象
    //该方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    //即使查询到的元素只有一个，也会封装到数组中返回
    var lis=document.getElementsByTagName("li");
    //遍历lis
    for (var i=0;i<lis.length;i++){
        alert(lis[i].innerHTML);
    }
}

getElementsByName()

-通过name属性获取一组元素节点对象
innerHTML能够获取元素内部的HTML

例子

查找name=gender的所有节点

var btn03=document.getElementById("btn03");
btn03.onclick=function () {
    //查找name=gender的所有节点
    var inputs=document.getElementsByName("gender");
    for (var i=0;i<inputs.length;i++){
        //如果需要获取元素节点属性
        //直接使用 元素.属性名
        /*
        例子：
            元素.id 元素.name 元素.value
            注意:class属性不能采用这种方法
                读取class属性是需要使用 元素.className
         */
        alert(inputs[i].value);
    }
}

获取元素子节点

通过具体的元素节点调用

childNodes()

-属性，表示当前节点的所有子节点
该属性会获取包括文本节点在内的所有子节点
DOM标签间的空白也会获取到
children()属性可以获取当前元素的所有子元素

例子

返回#city的所有子节点

var btn05=document.getElementById("btn05");
btn05.onclick=function () {
    var city=document.getElementById("city");
    var cns=city.childNodes;
    /*
    该属性会获取包括文本节点在内的所有子节点
    DOM标签间的空白也会获取到
    children()属性可以获取当前元素的所有子元素
     */
    var cns2=city.children;
    alter(cns2.length);
}

firstChild()

-属性，表示当前节点的第一个子节点
可以获取到当前元素的第一个子节点(包括空白文本)
firstElementChild()获取当前元素的第一个子元素(不支持IE8及以下的浏览器)

例子

返回#phone的第一个子节点

var btn06=document.getElementById("btn06");
btn06.onclick=function () {
    var phone=document.getElementById("phone");
    /*
    firstChild可以获取当前元素的第一个子节点(包括空白文本)
     */
    var fir=phone.firstChild;
    alert(fir);
}

由于我们对元素逐个进行绑定，重复代码过多，因此为了方便操作，我们可以定义一个函数，
专门用来为指定元素绑定单击响应函数
参数:
idStr 要绑定单机响应函数的对象的id属性值
fun 事件的回调函数，当单击元素时，该函数将会触发

function myClick(idStr,fun) {
    var btn=document.getElementById(idStr);
    btn.onclick=fun;
}

获取父节点和兄弟节点

通过具体的节点调节

parentNode

-属性，表示当前节点的父节点

例子

获取id为bj的节点
前面提到 innerHTML 能够获取元素内部的HTML内容
同样有一个类似的 innerText属性 能够获取到元素内部的文本内容
他和innerHMTL 类似,不同的是它会自动将html去除

myClick("btn07",function () {
    var bj=document.getElementById("bj");
    var pn=bj.parentNode;
    alert(pn.innerText);
})

previousSibling

-属性,表示当前节点的前一个兄弟节点
也可能获取到前面的空白文本

例子

返回#android的前一个兄弟节点

myClick("btn08",function () {
    var and=document.getElementById("android");
    var ps=and.previousSibling;
    //获取前一个兄弟元素 previousElementSibling ,但是IE8及以下不支持
    var pe=and.previousElementSibling;
    alert(ps);
})

nextSibling

-属性,表示当前节点的后一个兄弟节点

例子

读取#username的value属性值

myClick("btn09",function () {
    var um=document.getElementById("username");
    //读取um的value属性值
    //文本框的value属性值,就是文本框中填写的内容
    alert(um.value);
})

设置#username的value属性值

myClick("btn10",function () {
    var um=document.getElementById("username");
    um.value="zz";
})

返回#bj的文本值

myClick("btn11",function () {
    var bj=document.getElementById("bj");
    alert(bj.firstChild.nodeValue);
})