JavaScript之DOM查询

最新推荐文章于 2024-06-25 17:54:49 发布

极客研究者

最新推荐文章于 2024-06-25 17:54:49 发布

阅读量110

点赞数

分类专栏： JavaScript 文章标签： javascript js dom

本文链接：https://blog.csdn.net/qq_34550459/article/details/105786115

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

获取元素节点:通过document对象调用

1.getElementById():
通过id属性获取一个元素节点对象

2.getElementsByTagName():
通过标签名获取一组元素节点对象
可以用于获取当前节点下的指定标签名的所有子节点

3.getElementsByName()
通过name属性获取一组元素节点对象

Demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM查询</title>
    <link rel="stylesheet" href="../css/css.css">
    <script>
        window.onload = function () {
            var btn01 = document.getElementById('btn01');
            btn01.onclick = function () {
                //查找bj节点
                var bjEle = document.getElementById('bj');
                //innerText属性:获取元素内部的文本内容
                var text = bjEle.innerText;
                console.log(text);
                //innerHTML属性:获取元素内部的html代码
                var h = bjEle.innerHTML;
                console.log(h);
            }

            //查找所有li节点:
            var btn02 = document.getElementById('btn02');
            btn02.onclick = function () {
                // debugger;
                var liCollection = document.getElementsByTagName('li'); //返回的是li元素集合
                var len = liCollection.length;
                for (var i = 0; i < len; i++) { //循环遍历
                    console.log(liCollection[i].innerHTML);
                }
            }

            //查找name=gender的所有节点
            var btn03 = document.getElementById('btn03');
            btn03.onclick = function () {
                //  debugger;
                var genderCollection = document.getElementsByName('gender');
                for (var i = 0; i < genderCollection.length; i++) {
                    console.log(genderCollection[i].getAttribute('value'));
                }
            }


            //查找#city下所有li节点
            var btn04 = document.getElementById('btn04');
            btn04.onclick = function () {
                // debugger;
                var cityElement = document.getElementById('city');
                // var childNodes=cityElement.childNodes;//获取当前节点下的所有子节点            
                //getElementsByTagName():可以获取当前节点下的指定标签名的所有子节点

                var liCollection = cityElement.getElementsByTagName('li');
                for (var i = 0; i < liCollection.length; i++) {
                    console.log(liCollection[i].innerHTML);
                }
            }

            //查找#city下所有子节点
            var btn05 = document.getElementById('btn05');
            btn05.onclick = function () {
                //  debugger;
                var cityNode = document.getElementById('city');
                var nodeList = cityNode.childNodes;
                var len = nodeList.length;
                for (var i = 0; i < len; i++) {
                    console.log(nodeList[i].innerHTML);
                    // console.log(nodeList[i].nodeName); //获取节点的名称
                }
            }

            //返回#phone的第一个子节点
            var btn06 = document.getElementById('btn06');
            btn06.onclick = function () {
                debugger;
                var phoneElement = document.getElementById('phone');
                var firstChildNode = phoneElement.firstChild;
                if (firstChildNode != null) {
                    console.log(firstChildNode.innerText);
                }
            }


            //返回#bj的父节点
            var btn07=document.getElementById('btn07');
            btn07.onclick=function(){
            //  debugger;
             var bjLiNode=document.getElementById('bj');
             var bjParentNode=bjLiNode.parentNode;
             alert(bjParentNode.innerText);
            }


            //返回#android的前一个兄弟节点(元素节点或者文本节点)
            var btn08=document.getElementById('btn08');
            btn08.onclick=function(){
            //    debugger;
               var androidNode=document.getElementById('android');
               var previousSiblingNode= androidNode.previousSibling;//前一个兄弟节点(元素节点或者文本节点)
               //前一个兄弟元素节点,IE8以及以下版本不支持
            //    var previousSiblingNode=androidNode.previousElementSibling;
               alert(previousSiblingNode.innerHTML);
            }

            //返回#username的value属性值
            var btn09=document.getElementById('btn09');
            btn09.onclick=function(){
            var usernameInput=document.getElementById('username');
            
            /*
            读取元素的属性值:
            方式一:
            使用元素的getAttribute(attributeName)方法获取指定的属性值

            方式二:
             元素对象.属性名

            */
            

            // var val= usernameInput.getAttribute('value');

            //使用点语法快捷键读取属性值
            var val=usernameInput.value;
            console.log("val:"+val);

            //获取class 值
            var usernameInputClassName=usernameInput.className;
            console.log("usernameInputClassName:"+usernameInputClassName);
            }


            //设置#username的value属性值
            var btn10=document.getElementById('btn10');
            btn10.onclick=function(){
                // debugger;
                var usernameInput=document.getElementById('username');
                /*
                setAttribute(name,value):
                name:设置属性名
                value:设置属性值
                必须都要以字符串的形式进行传递

                */
                usernameInput.setAttribute('value','testUserName');
                var attributeVal=usernameInput.getAttribute('value');
            }

            //获取#bj文本内容
            var btn11=document.getElementById('btn11');
            btn11.onclick=function(){
               var bjNode=document.getElementById('bj');
            // alert(bjNode.innerHTML);
            // alert(bjNode.innerText);
            // alert(bjNode.firstChild.textContent);//获取文本节点的文本内容

            }

        }
    </script>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj"><span>北京</span></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" type="radio" name="gender" value="male" />
            Male
            <input class="hello" type="radio" name="gender" value="female" />
            Female
            <br>
            <br>
            name:
            <input type="text" name="name" id="username" class="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>
</body>

</html>