DOM基础

最新推荐文章于 2024-09-09 09:35:48 发布

mmm要努力做码农！

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量215

点赞数

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

本文链接：https://blog.csdn.net/dfg98/article/details/112438601

版权

JavaScript学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM：（Document Object Model（文档对象模型））简单理解为——元素操作。
DOM结构是树形结构，其常用的节点类型有：元素节点、属性节点、文本节点，可使用nodeType属性来判断一个节点的类型

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

获取元素的方法：（严格区分大小写）

（1）document.getElementById(“id名”)

通过id来选中元，类似于CSS中的id选择器

<!DOCTYPE html> 
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script>
       window.onload = function () 
       {
           var oDiv = document.getElementById("div1");
           oDiv.style.color = "red";
       }
   </script>
</head>
<body>
   <div id="div1">JavaScript</div>
</body>
</html>

（2）document.getElementsByTagName(“标签名”)

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oUl = document.getElementById("list");
            var oLi = oUl.getElementsByTagName("li");
            oLi[2].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

（3）document.getElementsByClassName(“类名”)

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oLi = document.getElementsByClassName("select");
            oLi[0].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li class="select">JavaScript</li>
        <li class="select">jQuery</li>
        <li class="select">Vue.js</li>
    </ul>
</body>
</html>

（4）document.querySelector(“选择器”)和document.querySelectorAll(“选择器”)

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oDiv = document.querySelectorAll(".test");
            oDiv[1].style.color = "red";
        }
    </script>
</head>
<body>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
    <div class="test">JavaScript</div>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
</body>
</html>

分析：document.querySelectorAll(".test")表示获取所有class为test的元素。由于获取的是多个元素，因此这也是一个类数组。想要精确得到某一个元素，也需要使用数组下标的形式来获取。

（5）document.getElementsByName(“name名”)

getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oInput = document.getElementsByName("status");
            oInput[2].checked = true;
        }
    </script>
</head>
<body>
    你的学历:
    <label><input type="radio" name="status" value="本科" />本科</label>
    <label><input type="radio" name="status" value="硕士" />硕士</label>
    <label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>

（6）document.title和document.body

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            document.title = "梦想是什么？";
            document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
        }
    </script>
</head>
<body>
</body>
</html>

对元素进行相应的操作：

1、创建元素：

var e1 = document.createElement("元素名");//创建元素节点
var txt = document.createTextNode("文本内容");   //创建文本节点
e1.appendChild(txt);                          //把文本节点插入元素节点中
e2.appendChild(e1);                          //把组装好的元素插入已存在的元素中

注意：A.appendChild(B)表示把B插入到A内部中去，也就是使得B成为A的子节点。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oDiv = document.getElementById("content");
            var oStrong = document.createElement("strong");
            var oTxt = document.createTextNode("绿叶学习网");
            //将文本节点插入strong元素
            oStrong.appendChild(oTxt);
            //将strong元素插入div元素（这个div在HTML已经存在）
            oDiv.appendChild(oStrong);
        }
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

2、插入元素：

（1）A.appendChild(B); 意将一个新元素B插入到父元素A的内部子元素的末尾

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            //为按钮添加点击事件
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中去
                oLi.appendChild(textNode);
                //将li元素插入ul元素中去
                oUl.appendChild(oLi);
            };
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>

（2）A.insertBefore(B,ref); 将一个新元素B插入到父元素A中的某一个子元素ref“之前”。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中
                oLi.appendChild(textNode);
                //将li元素插入到ul的第1个子元素前面
                oUl.insertBefore(oLi, oUl.firstElementChild);
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>

（3）删除元素：A.removeChild(B); 删除父元素A下的某个子元素B

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                //删除最后一个子元素
                oUl.removeChild(oUl.lastElementChild);            
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="删除" />
</body>
</html>

（4）复制元素：obj.cloneNode(bool)

参数obj表示被复制的元素，而参数bool是一个布尔值

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                document.body.appendChild(oUl.cloneNode(1));
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="复制" />
</body>
</html>

（5）替换元素：A.replaceChild(new,old);

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                //获取body中的第1个元素
                var oFirst = document.querySelector("body *:first-child");
                //获取2个文本框
                var oTag = document.getElementById("tag");
                var oTxt = document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                var oNewTag = document.createElement(oTag.value);
                var oNewTxt = document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag, oFirst);
            }
        }
    </script>
</head>
<body>
    <p>JavaScript</p>
    <hr/>
    输入标签：<input id="tag" type="text" /><br />
    输入内容：<input id="txt" type="text" /><br />
    <input id="btn" type="button" value="替换" />
</body>
</html>

mmm要努力做码农！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础

DOM：（Document Object Model（文档对象模型））简单理解为——元素操作。DOM结构是树形结构，其常用的节点类型有：元素节点、属性节点、文本节点，可使用nodeType属性来判断一个节点的类型节点类型nodeType值元素节点1属性节点2文本节点3获取元素的方法：（严格区分大小写）（1）document.getElementById(“id名”)通过id来选中元，类似于CSS中的id选择器<!DOCTYPE html>
复制链接

扫一扫