JavaScript DOM

浅笑心柔142

于 2024-09-15 17:22:50 发布

阅读量747

点赞数 23

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_72013756/article/details/142201508

一、DOM简介

1、简介

Document Object Model 文档对象模型

浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树

HTML文档和DOM树是一一对应的关系
当DOM树被改变时，与之对应的HTML文档也会随之改变
当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件
树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档

<script>
        //document对象，表示整个文档
        console.log(document);
    </script>

2、document属性

<head>
    <script>
        //document.bgColor属性
        function dobgColor(){
            document.bgColor="red";//改变背景颜色
            console.log(document.bgColor);//获取背景颜色
        }
        //document.title属性
        function doTitle(){
            document.title="DOM";//改变标题
            console.log(document.Title);//获取标题
        }
        //document.body属性
        function doBody(){
            document.body.appendChild(document.createTextNode("嘿嘿"));//向body内部添加一个文本节点
            //console.log(document.body);//获取主体
        }
    </script>
</head>
<body>
    <button onclick="dobgColor()">操作页面背景</button>
    <button onclick="doTitle()">操作页面标题</button>
    <button onclick="doBody()">操作页面主体</button>
    <h2>hello world</h2>
</body>

二、查询操作

获取DOM对象

方法	含义
document.getElementById("id值")	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName("name属性值")	根据name属性来查询，返回所有匹配的节点集合
document.getElementsByTagName("标签名")	根据标签名来查询，返回所有匹配的节点集合
document.getElementsByClassName("类名")	根据class属性来查询，返回所有匹配的节点集合
document.querySelector("选择器")	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll("选择器")	根据css选择器来查询，返回所有匹配的节点集合
node.getElementsByTagName("标签名")	在当前节点的内部根据标签名来查询
node.parentNode属性	查询当前节点的父节点
node.children属性	查询当前节点的所有子元素节点
node.firstElementChild属性	查询当前节点的第一个子元素节点
node.lastElementChild属性	查询当前节点的最后一个子元素节点
node.previousElementSibling属性	查询当前节点的上一个元素节点
node.nextElementSibling属性	查询当前节点的下一个元素节点

节点类型分为：元素节点、文本节点、属性节点等

示例：

<head>
    <script>
        function doQuery(){
        //1.根据id获取，返回单个对象
        var a=document.getElementById("d1");
        console.log(a);
        console.log(typeof a);//object，DOM对象，表示页面中对应的元素
        //2.根据name获取,返回集合
        var objs=document.getElementsByName("hobby");
        console.log(objs);
        //3.根据标签名获取，返回集合
        var objs1=document.getElementsByTagName("div");
        console.log(objs1[1]);//通过索引获取集合中的元素
        //4.根据class获取，返回集合
        var objs2=document.getElementsByClassName("hello");
        console.log(objs2);
        //5.根据css选择器获取，返回单个对象
        var obj1=document.querySelector("div.hello");//获取class为hello的div
        console.log(obj1);
        //var obj1=document.querySelector("div");//返回匹配的第一个元素
        //6.根据css选择器获取，返回集合
        var objs2=document.querySelectorAll("div");
        console.log(objs2);
        }
    </script>
</head>
<body>
    <button onclick="doQuery()">查询获取页面中的元素</button>
    <hr>
    <div id="d1">div1</div>
    <div class="hello">div2</div>
    <div>div3</div>
    <p class="hello">welcome</p>
    <span class="hello">你好</span><br>
    爱好：<input type="checkbox" name="hobby" value="sport">健身
         <input type="checkbox" name="hobby" value="music">听歌
         <input type="checkbox" name="hobby" value="read">阅读
         <hr>
</body>

<head>
    <script>
        function doQuery(){
        //根据已有的节点来获取其他节点
        
        //7.在当前节点的内部，根据标签名获取
        var ul=document.getElementById("myul");
        var lis=ul.getElementsByTagName("li");
        console.log(lis);
        //8.查询当前节点的父节点
        var li3=document.getElementById("third");
        console.log("父节点：",li3.parentNode);
        console.log("父节点的父节点：",li3.parentNode.parentNode);
        //9.查询当前节点的所有子元素节点
        console.log("父节点的所有子节点:",li3.parentNode.children);
        //10.查询当前节点的第一个子元素节点
        console.log("第一个子节点:",li3.parentNode.firstElementChild);
        //11.查询当前节点的最后一个子元素节点
        console.log("最后一个子节点:",li3.parentNode.lastElementChild);
        //12.查询当前节点的上一个元素节点
        console.log("前一个兄弟节点：",li3.previousElementSibling);
        //13.查询当前节点的下一个元素节点
        console.log("后一个兄弟节点：",li3.nextElementSibling)；
 }
    </script>
</head>
<body>
    <button onclick="doQuery()">查询获取页面中的元素</button>
    <hr>
    <ul id="myul">
        <li>li1</li>
        <li>li2</li>
        <li id="third">li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>     
</body>

三、访问操作

1、访问属性

获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与对应HTML标签同名的属性

两种方式：

直接访问属性
用法：DOM对象.属性　

调用setAttribute()和getAttribute()方法
用法：DOM对象.setAttribute("属性名","属性值") 或 DOM对象.getAttribute("属性名")

<head>
<script>
        //访问属性
        function doproperty(){
            let obj=document.getElementById("baidu");//DOM属性
            let obj1=document.querySelector("#username");//CSS选择器，要加#
            let obj2=document.querySelector("#male");
            console.log(obj);
            //获取属性的值
            console.log(obj.href);
            console.log(obj.target);
            console.log(obj.id);
            console.log(obj.getAttribute("href"));
            console.log(obj1.value);
            console.log(obj2.checked);//checked是一个boolean属性，取值为true、false
            //设置属性的值
            obj.target="_self";
            obj.setAttribute("href","https://www.qq.com")
            obj1.value="alice";
            obj2.checked="true";
        }
</script>
</head>
<body>
 <button onclick="doproperty()">访问属性</button>
    <hr>
    <a href="https://www.baidu.com" target="_blank" id="baidu">点我</a>
    <br>
    用户名:<input type="text" id="username" value="tom"><br>
    性别:<input type="radio" name="sex" id="male" value="male" checked>男
         <input type="radio" name="sex" id="female" value="female" >女<br>

</body>

2、访问内容

获取/设置标签中的内容

 三种方式：

使用innerHTML
用法：DOM对象.innerHTML 将内容解析为HTML

使用innerText
用法： DOM对象.innerText 将内容作为纯文本，出现转义符时会进行解析

使用textContent
用法： DOM对象.textContent 将内容作为纯文本，出现转义符时会直接保留特性

<head>
<script>
         //访问内容
        function doContent(){
            var obj=document.getElementById("mydiv");
            //获取内容 
            console.log(obj.innerHTML);//HTML
            console.log(obj.innerText);//纯文本
            console.log(obj.textContent);//纯文本
            //设置内容
            obj.innerHTML="<h1>嘿嘿</h1>";//将内容解析为HTML
            obj.innerText="嘿\n嘿";//纯文本，出现转义符时会进行解析
            obj.textContent="<h1>嘿嘿</h1>";//纯文本,出现转义符时会直接保留特性

        }
</script>
</head>
<body>
 <button onclick="doContent()">访问内容</button>
    <hr>
    <div id="mydiv">
        <h2>hello world</h2>
    </div>     

</body>

3、访问CSS

获取/设置CSS样式

三种方式：

使用style属性
用法：DOM对象.style.样式属性

如果CSS属性中有短横线-，需要去掉短横线，然后将其后的单词首字母改成大写，如fontSize

使用className属性
用法：DOM对象.className

使用classList属性
用法：DOM对象.classList

通过classList的add()、remove()进行类样式的添加和删除

style属性

<script>
            //访问样式
        function doStyle(){
            var obj=document.getElementById("mydiv");
            //使用style属性
            //获取样式(仅限于行内样式)
            console.log(obj.style.width);
            console.log(obj.style.background);
            console.log(obj.style.height);
            //设置样式
            obj.style.color="red";
            obj.style.width="400px";//必须添加单位，否则不生效
            obj.style.fontSize="30px";//属性中有短横线-，需要去掉短横线，然后将其后的单词首字母改成大写
            obj.style.boderTopRightRadius="10px";

}
 </script>
        <body>
    <button onclick="doStyle()">访问样式</button>
    <hr>
    <div id="mydiv" style="width: 300px;height:300px;background:pink;">
        <h2>hello world</h2>
    </div>
        </body>

className属性

<style>
            .d1{
                width:300px;
                height:300px;
                background: pink;
            }
            .hello{
                color: red;
                width: 400px;
                font-size: 30px;
                border-radius: 20px;
                border:1px solid grey;
            }
        </style>
        <script>
            //访问样式
        function doStyle(){
            var obj=document.getElementById("mydiv");
            //使用className属性
            obj.className="hello";//将样式d1换成样式hello
            console.log(obj.className);
            
        }
        </script>
<body>
    <button onclick="doStyle()">访问样式</button>
    <hr>
    <div id="mydiv" class="d1">
        <h2>hello world</h2>
    </div>
</body>

classList属性

 <style>
            .d1{
                width:300px;
                height:300px;
                background: pink;
            }
            .hello{
                color: red;
                width: 400px;
                font-size: 30px;
                border-radius: 20px;
                border:1px solid grey;
            }
            .world{
                text-decoration: underline;
            }
            
        </style>
        <script>
            //访问样式
        function doStyle(){
            var obj=document.getElementById("mydiv");
            //使用classList属性
            //添加类样式
            obj.classList.add ("hello");
            obj.classList.add ("world");
            //删除类样式
            obj.classList.remove ("hello");
            console.log(obj.classList);
  }
        </script>
<body>
<button onclick="doStyle()">访问样式</button>
    <hr>
    <div id="mydiv" class="d1">
        <h2>hello world</h2>
    </div>
</body>

四、更新操作

节点的创建、添加、修改、删除等

方法	含义
document.createElement("标签名")	创建一个元素节点，即标签
document.createTextNode("文本内容")	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode)	将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode
node.removeChild(refNode)	删除当前节点中指定的子节点
node.remove()	删除当前节点

<script>
            function doUpdate(){
                //1.创建元素节点
                var li=document.createElement("li");
                //2.设置文本内容
                li.innerText="li4";
                //var txt=document.createTextNode("li4");
                //li.appendChild(txt);
                //3.设置属性
                li.id="fourth";
                //li.setAttribute("id","fourth");
                //4.添加到节点中
                var myul=document.getElementById("myul");
                console.log(li);
                //添加到末尾
                //myul.appendChild(li);
                //添加到指定节点前面
                //myul.insertBefore(li,document.getElementById("second"));
                //替换指定的节点
                //myul.replaceChild(li,document.getElementById("second"));
                //删除内部某个子节点
                //myul.removeChild(document.getElementById("second"));
                //删除当前节点
                document.getElementById("second").remove();
                
            }
         
        </script>
<body>
<button onclick="doUpdate()">更新节点</button>
    <hr>
    <ul id="myul">
        <li id="first">li1</li>
        <li id="second">li2</li>
        <li>li3</li>
    </ul>
</body>