JSDOM基础查询

window.onload = function() {
    //为id为btn01的按钮绑定一个单击响应函数
    var btn01 = document.getElementById("btn01");
    btn01.onclick = function() {
        //查找id为bj的节点
        var bj = document.getElementById("bj");
        //innerHTML 通过这个属性可以获取到元素内部的html代码
        alert(bj.innerHTML);
    };
}

window.onload = function() {
    //为id为btn02的按钮绑定一个单击响应函数
    var btn02 = document.getElementById("btn02");
    btn02.onclick = function() {
        //查找所有li节点
        //getElementsByTagName()可以根据标签名来获取一组元素节点对象
        //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
        //即使查询到的元素只有一个,也会封装到数组中返回
        var lis = document.getElementsByTagName("li");
        for(var i = 0; i < lis.length; i++) {
            alert(lis[i].innerHTML);
        }
    };
}

window.onload = function() {
    //为id为btn03的按钮绑定一个单击响应函数
    var btn03 = document.getElementById("btn03");
    btn03.onclick = function() {
        //查找name属性,值为gender的所有节点
        var inputs = document.getElementsByName("gender");
        for(var i = 0; i < inputs.length; i++) {
            /* innerHTML用于获取元素内部的HTML代码的
			 * 对于自结束标签,这个属性没有意义
			 */
            /* 如果需要读取自结束标签的属性
			 * 直接使用 元素.属性名
			 * 例: 元素.id 元素.name 元素.value
			 * 注意: class属性不能采用这种方式
			 * 读取class属性时需要使用 元素.className
			 */
            var str = "class=\""+inputs[i].className+
                "\" type=\""+inputs[i].type+"\" name=\""+
                inputs[i].name+"\" value=\""+inputs[i].value+"\"";
            alert(str);
        }
    };
}

window.onload = function() {
    //为id为btn04的按钮绑定一个单击响应函数
    var btn04 = document.getElementById("btn04");
    btn04.onclick = function() {
        //查找#city下所有li节点
        //获取id为city的元素
        var city = document.getElementById("city");
        //获取city下的所有li元素
        var citys = city.getElementsByTagName("li");
        for(var i = 0; i < citys.length; i++) {
            var str = citys[i].innerHTML;
            alert(str);
        }
    };
}

window.onload = function() {
    //为id为btn05的按钮绑定一个单击响应函数
    var btn05 = document.getElementById("btn05");
    btn05.onclick = function() {
        //返回#city的所有子节点
        //获取id为city的元素
        var city = document.getElementById("city");
        /* 获取city下的所有节点:
         * 这其中包括文本节点
         * 空白字符(换行、空格等)也算文本节点
         */
        var nodes = city.children;
        //若我们只是想获取所有子元素(即HTML标签)可以这样
        nodes = city.childNodes;
        for(var i = 0; i < nodes.length; i++) {
            alert(nodes[i]);
        }
    };
}

window.onload = function() {
    //为id为btn06的按钮绑定一个单击响应函数
    var btn06 = document.getElementById("btn06");
    btn06.onclick = function() {
        //返回#phone的第一个子节点
        //获取id为phone的元素
        var phone = document.getElementById("phone");
        var first = phone.firstChild;
        alert(first);
        //若HTML代码被格式化了,上面输出为:object Text
    };
}

function myClick(id,fun){
    var btn = document.getElementById(id);
    btn.onclick = fun;
}
window.onload = function() {
    //获取id为btn07的按钮并为其绑定一个单击响应函数
    var btn07 = myClick("btn07",function(){
        //返回#bj的父节点,注意:父节点一定是元素即标签
        var bj = document.getElementById("bj");
        var bjParent = bj.parentNode;
        //alert(bjParent.innerHTML);//获取元素的HTML代码
        /* innerText属性:获取元素内部的文本内容
         * 它会自动将innerHTML中的HTML标签去掉
         */
        alert(bjParent.innerText);
    });
}

window.onload = function() {
    //获取id为btn08的按钮并为其绑定一个单击响应函数
    var btn08 = myClick("btn08",function(){
        //返回#android的前一个兄弟节点
        var android = document.getElementById("android");
        var ardPre = android.previousSibling;
        alert(ardPre);
    });
}