欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DOM查询例子

程序员文章站 2022-03-27 13:59:27
dom查询完整例子加代码css部分@CHARSET "UTF-8";body { width: 800px; margin-left: auto; margin-right: auto;}button { width: 300px; margin-bottom: 10px;}#btnList { float:left;}#total{ width: 450px; float:left;}ul{ list-style-typ...

dom查询完整例子加代码

css部分
@CHARSET "UTF-8";

body {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}

button {
   width: 300px;
   margin-bottom: 10px;
}

#btnList {
   float:left;
}

#total{
   width: 450px;
   float:left;
}

ul{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

.inner li{
   border-style: solid;
   border-width: 1px;
   padding: 5px;
   margin: 5px;
   background-color: #99ff99;
   float:left;
}

.inner{
   width:400px;
   border-style: solid;
   border-width: 1px;
   margin-bottom: 10px;
   padding: 10px;
   float: left;
}
html和js部分
<!DOCTYPE>
<html>
<head>
    <title></title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link href="style/css.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        /**
         * 在写第七个重复性的代码时,卧槽是真的累,难道像我这样底层程序员只能写重复代码?
         * 抽象抽象,这样才有类才能去找对象。
         * 既然是重复性的代码,我们何不抽取出来成为另外一个函数来简化操作呢
         */
        function simplify(idstr, fun) {
            //绑定单击响应函数对象的id属性 传入这个需要绑定的参数
            var btn = document.getElementById(idstr);
            //绑定每个按钮的触发函数,这个是不同的不能写死,那就传入一个函数吧
            //回调函数这就是了,我先占个位置,放个函数在这,用的时候去修改这个函数
            btn.onclick = fun;
        }


        window.onload = function () {

            //为id为btn01的按钮绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");

            function fun() {
                //查找#bj节点,得到的是一个对象
                var bj = document.getElementById("bj");
                //打印bj
                alert(bj.innerHTML);
            }

            btn01.onclick = fun;

            //为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++) {
                    //依次打印出所有li标签里的内容
                    alert(lis[i].innerHTML);
                }
            };

            //为id为btn03的按钮绑定一个单击响应函数
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function () {
                /**
                 *查找name=gender的所有节点
                 * getElementsByName()方法可以根据Name属性获取一组元素节点对象
                 * 返回的也是类数组 NodeList
                 */
                var gen = document.getElementsByName("gender");
                for (var i = 0; i < gen.length; i++) {
                    /**
                     * innerHTML用于获取元素内部HTML代码(两个标签之间夹的文字)
                     *   如果需要读取元素节点属性值
                     */
                    alert(gen[i].value);
                }
            };

            //为id为btn04的按钮绑定一个单击响应函数
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function () {
                // 获取id为city的元素
                var city = document.getElementById("city");
                /**
                 * 获取#city下所有li节点,不能直接使用document.getElementsByTagName
                 * 那样获取的是全局的li标签,
                 * 先获取某元素节点,在在该节点下的后代节点中寻找li标签
                 */
                var lis = city.getElementsByTagName("li");
                for (var i = 0; i < lis.length; i++) {
                    alert(lis[i].innerHTML);
                }
            };

            //为id为btn05的按钮绑定一个单击响应函数
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function () {
                //获取id为city的节点
                var city = document.getElementById("city");
                /**
                 *childNodes–属性,表示当前节点的所有子节点,包括文本节点在内的所有节点
                 * DOM标签之间的空格也会当成一个文本节点
                 * 下边ul和li之间,li和li之间的五个间隔也会当成文本节点保存在集合中
                 * 返回的是集合,包括每一个节点元素的类数组
                 *  <ul id="city">
                 * <li id="bj">北京</li>
                 * <li>上海</li>
                 * <li>东京</li>
                 * <li>首尔</li>
                 * </ul>
                 * 注意:在ie8及以下不会将空白当做子节点
                 */
                    //返回#city的所有子节点
                var cns = city.children;
                alert(cns.length);
                for (var i = 0; i < cns.length; i++) {
                    console.log(cns[i]);
                }

            };

            //为id为btn06的按钮绑定一个单击响应函数
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function () {
                var phone = document.getElementById("phone");
                /**
                 * 下边html标签如果不想连着写就用childNodes属性获取所有节点
                 * 使用数组下标形式调用
                 * 或者直接使用chidren属性,采用下标形式调用。
                 */
                    //返回#phone的第一个子节点
                var firchd2 = phone.firstElementChild;
                alert(firchd2.innerHTML);
                // var firChd = phone.children;
                // alert(firChd[0].innerHTML);

            };

            //返回#bj的父节点
            simplify("btn07", function () {
                var bj = document.getElementById("bj");
                //返回#bj的父节点
                var bjp = bj.parentNode;
                //alert(bjp.innerHTML);
                /***
                 * innerText
                 *  -该属性可以获得元素内部的文本属性
                 *  -他和innerHTML区别,会自动将html标签去掉。
                 */
                alert(bjp.innerText);
            });

            //返回#android的前一个兄弟节点
            simplify("btn08", function () {
                var use = document.getElementById("android");
                //var pvsb = use.previousSibling;
                var pvsb2 = use.previousElementSibling
                alert(pvsb2.innerHTML);

            });

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

            //设置#username的value属性值
            simplify("btn10",function () {
                var use = document.getElementById("username");
                use.value = "人和人的沟通,有时也没没有用";
                var usevue = use.value;
                //文本框的value值就是文本框中填写的内容
                alert(usevue);
            });

            //返回#bj的文本值
            simplify("btn11",function () {
               var bj = document.getElementById("bj");
               //alert(bj.innerHTML);
               //alert(bj.innerText);
                //北京文本节点是id为bj元素的子节点,可以使用lastChild来获取
                var  last = bj.lastChild;
                /**
                 * 注意文本节点内容不能在使用innerHTML,
                 * 文本节点的nodeValue就是文本内容
                 * 属性节点的nodeValue就是属性值
                 * 可以直接写为bj.lastChid.nodeValue
                 *
                 */
                alert(last.nodeValue);
            });


        };


    </script>
</head>
<body>
<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 class="hello" name="gender" type="radio" value="male"/>
        Male
        <input class="hello" name="gender" type="radio" value="female"/>
        Female
        <br>
        <br>
        name:
        <input id="username" name="name" type="text" 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>
</body>
</html>
fun()和fun的区别

fun是一个定义函数,函数是function引用类型的实例,就是一个对象,是对象就会被保存在内存中,引用类型会被保存在堆内存,(直接赋值字面量会被保存在栈内存),函数名就是指向这个对象的指针。

function fun() {
return 0;
}
var a= fun;
var b= fun();
var c= (function (){
return 0;
})();
var d= function (){
return 0;
};

a变量得到的是将fun指针的拷贝,用于传参,不会执行函数,让a知道了fun函数位置,需要的时候再用,和d得到的差不多,就是回调函数。

b变量得到的是函数执行结果,只要函数名后加了括号,就会调用该函数。c和b的到的一样,c是匿名自调用函数,一旦定义立即执行,只执行一次。

本文地址:https://blog.csdn.net/LIUCHUANQI12345/article/details/109262850