JS - 关于DOM的介绍和使用01

DOM（Document Object Model）是一种用于表示和操作HTML、XML等文档结构的编程接口。在JavaScript中，通过DOM可以访问和操作网页中的各种元素、属性和事件。

获取元素：

通过ID获取元素：使用document.getElementById('elementId')方法。
通过标签名获取元素：使用document.getElementsByTagName('tagName')方法。
通过类名获取元素：使用document.getElementsByClassName('className')方法。
通过选择器获取元素：使用document.querySelector('selector')或document.querySelectorAll('selector')方法。

操作元素：

获取和设置元素的属性：使用element.getAttribute('attributeName')和element.setAttribute('attributeName', 'value')方法。
获取和设置元素的文本内容：使用element.textContent或element.innerHTML属性。
添加和删除元素：使用element.appendChild(newElement)和element.removeChild(childElement)方法。

修改样式：

获取和设置元素的样式属性：使用element.style.property属性。
添加、删除和切换CSS类：使用element.classList.add('className')、element.classList.remove('className')和element.classList.toggle('className')方法。

事件处理：

添加事件监听器：使用element.addEventListener('eventName', eventHandler)方法。
移除事件监听器：使用element.removeEventListener('eventName', eventHandler)方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
    //浏览器已经为我们提供文档节点对象，这个对象是window属性
    //可以在页面中直接使用，文档节点代表的是整个网页
    console.log(document);
    //获取到button对象，可以使用getElementById()
    var btn=document.getElementById("btn");
    console.log(btn);
    //修改按钮的文字
    console.log(btn.innerHTML);
    btn.innerHTML="I'm Button";
    console.log(btn.innerHTML);
    </script>
</body>
</html>

在这里插入图片描述

点击按钮触发简单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <!--以下代码存在结构和行为耦合，不推荐使用-->
    <!--<button id="btn" οnclick="alert('你点击了此摁钮！');">单击此摁钮</button>
    <br>
    <button id="btn" οndblclick="alert('你点击了此摁钮！');">双击此摁钮</button>
    <br>
    <button id="btn" οnmοusemοve="alert('你在摁钮上滑动了鼠标！');">在此摁钮上滑动一下</button>-->
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
    //事件就是用户和浏览器之间的交互行为
    //比如点击按钮，鼠标移动，关闭窗口
    var btn=document.getElementById("btn");
    //用函数的形式来处理对应事件
    //例如给btn增加一个单击事件
    btn.onclick=function()
    {
        alert("你点击了一次此摁钮！");
    };
    </script>
</body>
</html>

文档的加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //利用页面加载事件，使方法在页面加载完成之后才开始执行
    //onload事件会在整个页面加载完成后才触发
    //为windows绑定一个onload事件
    //该事件对应的响应函数将会在页面加载完成之后执行
    //这样可以确保我们的代码执行时所有的DOM对象已经加载完毕
    window.onload=function()
    {
        //为id为btn的按钮绑定一个单机响应函数，也就是btn.onclick
        var btn=document.getElementById("btn");
        btn.onclick=function()
        {
            //首先查找节点,并且为查找到的节点设定一个变量
            //getElementById()可以查找单个节点
            var yourmother=document.getElementById("yourmother");
            //打印获取到的节点
            //innerHTML属性可以直接获取到元素内部的HTML代码
            console.log(yourmother.innerHTML);
        };

        //为id为btn2的按钮绑定一个单机响应函数，也就是btn2.onclick
        var btn2=document.getElementById("btn2");
        btn2.onclick=function()
        {
            //首先查找所有li节点
            //getElementsByTagName()可以根据标签签名来获取一组元素节点对象
            //这个方法会给我们返回一个类数组对象，查询里面的元素可以使用数组方法来查询
            var listtext=document.getElementsByTagName("li");

            //打印listtext
           //alert(listtext.length);
           for(var i=0;i<listtext.length;i++)
           {
               console.log(listtext[i].innerHTML);
           }
        };

        //为id为btn3的按钮绑定一个单击响应函数，也就是btn3.onclick
        var btn3=document.getElementById("btn3");
        btn3.onclick=function()
        {
            //先找到所有的h1节点
            //getElementsByTagName()可以根据标签签名来获取一组元素节点对象
            var h1text=document.getElementsByTagName("h1");

            //打印h1text
            for(var i=0;i<h1text.length;i++)
            {
                console.log(h1text[i].innerHTML);
            }
        };
        
        //为id为btn3的按钮绑定一个单击响应函数，也就是btn3.onclick
        var btn4=document.getElementById("btn4");
        btn4.onclick=function()
        {
            //先找到所有的li节点
            //getElementsByTagName()可以根据标签签名来获取一组元素节点对象
            //先给所有的li节点设置一个name="gender"的属性 然后根据此属性来获取所要的对象
            var litext=document.getElementsByName("gender");

            //打印h1text
            for(var i=0;i<litext.length;i++)
            {
                console.log(litext[i].innerHTML);
                //元素的id name value都可以使用元素节点读取，但是class属性不能用这种方式读取
            }
        };
    };
    </script>
</head>
<body>
    <!--<button id="btn">点我一下</button>
    <script type="text/javascript">
    //获取id为btn的摁钮
    var btn=document.getElementById("btn");
    //为摁钮绑定一个单机响应函数
    btn.οnclick=function()
    {
        alert("hello");
    };
    //文档从上到下加载，如果把JS卸载head里面，那么就无法加载到摁钮
    </script>-->

    <button id="btn">单个节点内容查询</button>
    <button id="btn2">一组节点内容查询</button>
    <button id="btn3">一组节点内容查询</button>
    <button id="btn4">同一name的节点内容查询</button>
    <h1 id="yourmother">拉拉拉</h1>
    <ul id="list">
        <li name="gender" value=1>语文课</li>
        <li name="gender" value=1>数学课</li>
        <li name="gender">英语课</li>
        <li name="gender">物理课</li>
    </ul>
    <h1>yourmother</h1>
    <h1>yourfather</h1>
    <h1>yourgrandmother</h1>
    <h1>yourgrandfather</h1>
</body>
</html>

完成一个图片切换的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
       *{
           margin:0;
           padding:0;
        }
        #outer
        {
            width:600px;/*宽度设置为600个像素*/
            margin:50px auto;/*距离顶端个像素 默认居中*/
            background-color:yellow;/*背景颜色设置为黄色*/
            padding:10px;/*向四周扩大十个像素距离*/
            text-align:center;/*设置文本居中*/
        }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //点进按钮切换图片
        //获取两个按钮
        var previous=document.getElementById("previous");
        var next=document.getElementById("next");
        //获取img标签
        var img=document.getElementsByTagName("img")[0];//序号0表示第一个img 序号1表示第二个img
        console.log(img);
        //创建一个图片数组
        var imgArr=["../伊蕾娜素材/图一.jpeg","../伊蕾娜素材/图二.jpg","../伊蕾娜素材/图三.jpg","../伊蕾娜素材/图四.jpg","../伊蕾娜素材/图五.jpg","../伊蕾娜素材/图六.jpg","../伊蕾娜素材/图七.jpg","../伊蕾娜素材/图八.jpg","../伊蕾娜素材/图九.png","../伊蕾娜素材/图十.jpg"];
        console.log(imgArr);
        //创建一个变量，来表示当前变量的索引
        var index=0;
        //设置提示文字
        //获取id为info的p元素
        var info=document.getElementById("info");
        info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
        //再分别为两个按钮设置一个单击响应函数
        previous.onclick=function()
        {
            //切换图片就是修改img的src属性
            //img.src="../伊蕾娜素材/音乐播放器版.jpg";这样可以切换图片，但是只能切换到指定的图片
            //img.src=imgArr[0];//此方法改编了图片的使用，但是图片切换还是固定的
            index--;
            if(index<0)
            {
                index=imgArr.length-1;
            }
            img.src=imgArr[index];
            info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
        };
        next.onclick=function()
        {
            //img.src="../伊蕾娜素材/CDKeyWizard.jpg";这样可以切换图片，但是只能切换到指定的图片
            index++;
            if(index>imgArr.length-1)
            {
                index=0;
            }
            img.src=imgArr[index];
            info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
        };
    }
    </script>
</head>
<body>
    <div id="outer">
        <p id="info"></p>
        <img src="../伊蕾娜素材/图一.jpeg" alt="伊蕾娜03" height="600px" width="600px">
        <button id="previous">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

DOM的查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //为id为btn04的按钮绑定一个单击响应函数
        var btn04=document.getElementById("btn04");
        btn04.onclick=function()
        {
            //获取id为city的元素
            var city=document.getElementById("city");
            //查找#city下所有li节点
            var cityli=city.getElementsByTagName("li");
            console.log(cityli.length);
            console.log(cityli);
            for(var i=0;i<cityli.length;i++)
            {
                console.log(cityli[i].innerHTML);
            }
        };

        var btn05=document.getElementById("btn05");
        btn05.onclick=function()
        {
            //获取id为city的节点
            var city=document.getElementById("city");
            //返回#city的所有子节点
            //childNodes属性会获取包括文本节点在内的所有节点
            //zai IE8及以下的浏览器中，不会把空白当成子节点
            var citycn=city.childNodes;
            console.log(citycn.length);//多出来的五个是空白文本
            console.log(citycn);
            //children属性可以获取当前元素的所有子元素
            //相比childNodes，用children更好一点
            var citycn2=city.children;
            console.log(citycn2);
        }

        //为id为btn06的按钮绑定一个单机响应函数
        var btn06=document.getElementById("btn06");
        btn06.onclick=function()
        {
            //获取id为phone的元素
            var phone=document.getElementById("phone");
            //返回#phone的第一个子节点
            //firstChild可以获取到当前元素的第一个子节点（包括空白文本）
            var phone01=phone.childNodes[0];
            console.log(phone01);
            console.log(phone.firstChild);
            //firstElementChild可以获取当前元素的第一个子元素
            //此方法不支持IE8以下的浏览器，如果需要兼容IE8，尽量不要使用此方法
            console.log(phone.firstElementChild);
            //类似的还有lastChild，找最后一个子节点
        }
    };
    </script>
</head>
<body>
    
    <ul id="city">
        <li>语文课</li>
        <li>数学课</li>
        <li>英语课</li>
        <li>物理课</li>
    </ul>
    <ul id="phone">
        <li>IOS</li>
        <li>Android</li>
        <li>Windows Phone</li>
    </ul>
    <button id="btn04">查找功能四</button>
    <button id="btn05">查找功能五</button>
    <button id="btn06">查找功能六</button>
</body>
</html>

获取父节点和兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    //定义一个函数，专门用来为指定元素绑定单击响应函数
    //里面涉及的参数：
    //idStr:要绑定单击响应函数的对象的id属性值
    //fun:事件的回调函数，当单击元素时，该函数将会被触发
    function myClick(idStr,fun)
    {
        var btn=document.getElementById(idStr);
        btn.onclick=fun;
    }

    window.onload=function()
    {
    //为id为btn07的按钮绑定一个单击响应函数
    myClick("btn07",function()
    {
        //获取id为timetable的节点
        var yingyu=document.getElementById("yingyu");
        //返回timetable的父节点
        var pn=yingyu.parentNode;
        console.log(pn.innerHTML);
        console.log(pn.innerText);
        //innerHTML和innerText都会提取文本
        //不同的是Text会自动将标签去掉，而HTML会保留标签
    }
    );

    //为id为btn08的按钮绑定一个单击响应函数
    myClick("btn08",function()
    {
        //获取id为android的元素
        var add=document.getElementById("android");
        
        //返回#android的前一个兄弟节点
        //此属性会让空白文本也默认成为一个兄弟节点
        var aps=add.previousSibling;
        alert(aps.innerText);
        
        //此属性会返回上一个兄弟元素，无事其中的空白文档，但是IEM8及以下不支持
        var apes=add.previousElementSibling;
        alert(apes.innerText);
        
        //此属性会返回当前节点的下一个兄弟节点
        //但是此属性也同样会让空白文本默认成为一个兄弟节点
        var ans=add.nextSibling;
        alert(ans.innerText);

        //此属性会返回当前节点的下一个兄弟节点
        //但此属性会无视其中的空白文档,IE8及以下不支持
        var anes=add.nextElementSibling;
        alert(anes.innerText);
    }    
    );

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

    //设置username的value属性值
    myClick("btn10",function()
    {
        //获取id为username的元素
        var un=document.getElementById("username");
        //给un的value设置属性值
        un.value="Your Mother Fucker"
    }
    );

    //返回bj的文本值
    myClick("btn11",function()
    {
        //获取id为bj的元素
        var bj=document.getElementById("bj");
        console.log(bj.innerHTML);

        //获取bj中的文本节点
        var fc=bj.firstChild
        console.log(fc.nodeValue);//文本节点的属性值就是文本本身
        console.log(fc);
        console.log(bj.firstChild.nodeValue);
    }
    );

    };
    </script>
</head>
<body>
    <ul id="ttb">
        <li id="yingyu">英语课</li>
        <li id="bj">语文课</li>
        <li>数学课</li>
        <li>物理课</li>
    </ul>

    <ul id="phone">
        <li>IOS</li>
        <li id="android">Android</li>
        <li>Windows Phone</li>
    </ul>
    <button id="btn07">查找功能七</button>
    <button id="btn08">查找功能八</button>
    <button id="btn09">查找功能九</button>
    <button id="btn10">查找功能十</button>
    <button id="btn11">查找功能十一</button>
    <input type="text" name="name" id="username" value="abcde">
</body>
</html>