JavaScript中DOM详细介绍 , 元素的增删

攒了一袋星辰

于 2024-07-02 12:21:25 发布

阅读量524

点赞数 15

分类专栏：高级编程文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xiugtt6141121/article/details/140087654

版权

高级编程专栏收录该内容

19 篇文章 0 订阅

订阅专栏

DOM概述理解

DOM:document object model 文档对象模型。用来操作html页面中所有html标签的。在使用dom操作html标签之前，浏览器会将html页面中的标签加载到内存中形成一个dom树，上面最大的对象时document。我们可以通过document调用属性或者函数获取html标签。

在这里插入图片描述

DOM对象中的属性、方法介绍

1标签属性和文本的操作：

属性名	描述
element.getAttribute(属性的名称);	根据标签的属性的名字来获取属性的值
element.setAttribute(属性的名称, 值);	给标签设置一个属性
element.removeAttribute(属性的名称);	根据标签的属性的名字来删除属性
element.children;	获取当前元素（标签）的子元素注意：获取的子级（一层），不管嵌套(不包括孙子，只包括儿子)
element.nodeName/tagName;	获取标签名注意：获取的是大写的字符串的标签名
element.innerHTML;	获取当前元素（标签）的文本内容哈哈

【1】练习1

<input type="text" name="username" id="txt" value="java" />

需求1：获取属性 name的值

需求2: 给文本框设置一个属性 hello, 值是world

需求3：删除属性 value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="username" id="txt" value="java" />
    <script type="text/javascript">
        //获取input标签对象
        let oInput = document.getElementById('txt');
        // 需求1：获取属性 name的值
        //name表示input标签的属性名，根据name属性名获取name的属性值  username
        console.log(oInput.getAttribute('name'));
        // 需求2: 给文本框设置一个属性 hello, 值是world
        oInput.setAttribute('hello', 'world');
        // 需求3：删除属性 value element.removeAttribute(属性的名称);

    </script>
</body>
</html>

【2】

练习二：

<div id="div">我是div</div>

需求一：获取标签体的内容

需求二：设置标签体的内容：

<b>我是加粗的</b>

代码示例(标签体的内容)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--练习二：-->

<div id="div">我是div</div>
<script type="text/javascript">
    //1.需求一：获取标签体的内容
    //1.1获取标签对象
    let oDiv = document.getElementById('div');
    //1.2获取文本
    console.log(oDiv.innerHTML);
    console.log(oDiv.innerText);
    //需求二：设置标签体的内容：<b>我是加粗的</b>
    //2.1根据标签对象调用属性修改div的文本内容
    // oDiv.innerHTML = '<b>我是加粗的</b>';
    oDiv.innerText = '<b>我是加粗的</b>';
</script>


</body>
</html>

注意：

1.innerHTML和innerText都是操作标签文本的，但是innerHTML解析html标签的，innerText是不解析html标签的，会原样显示。以后使用innerHTML

【3】练习三：

<ul id="ul1">
	<li>aaa
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</li>
	<li>bbb</li>
</ul>

需求一：获取ID为ul1的所有的子级

需求二：获取ID为ul1下面第一个li的标签名和内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul1">
    <li>aaa
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </li>
    <li>bbb</li>
</ul>
<script type="text/javascript">
    //需求一：获取ID为ul1的所有的子级
    //1.1获取id为ul1的标签
    let oUl = document.getElementById('ul1');
    //1.2使用标签对象oUl调用属性获取子标签
    let arrLis = oUl.children;
    //1.3遍历
   /* for(let i=0;i<arrLis.length;i++){
        console.log(arrLis[i].innerHTML);
    }*/

    //需求二：获取ID为ul1下面第一个li的标签名和内容
    //获取标签名是大写
    console.log(arrLis[0].tagName);//LI
    //文本内容
    console.log(arrLis[0].innerHTML);

</script>
</body>
</html>

小结：

1.标签对象.children 获取指定标签的所有的子标签(儿子)

2.标签对象.innerHTML ：获取标签的文本。解析html标签的

3.标签对象.innerHTML = 数据修改文本值。解析html标签的

4.获取标签的属性值：标签对象.getAttribute(属性名);

2 获取标签(元素)

方法名	描述
document.getElementById(id属性值);	通过元素（标签）的id属性值获取标签对象，返回的是单个的标签对象注意：只能从document下面去获取
document.getElementsByName(name属性值);	通过元素（标签）的name属性值获取标签对象，返回的是标签对象的数组。注意：只能从document下面去获取
document/parentNode.getElementsByTagName(标签名);	通过元素（标签）的名称获取标签的对象,返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取
document/parentNode.getElementsByClassName(类名);	通过元素（标签）的class属性获取标签对象，返回的是标签对象的数组。注意：可以从document或者某一个父级标签下面去获取

注意：只有对象才可以调用属性和函数，数组不能调用。必须将数组中的每个对象取出才可以调用。

【1】练习一：

<div class="red">div1</div>
<div>div2</div>
<div class="red">div3</div>

<p>p1</p>
<p class="red">p2</p>
<p>p3</p>

<form action="#">
    用户名：<input type="text" name="username" value="suoge"/>
    密码： <input type="password" name="password" value="123"/>
    性别：<input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" />女
    <input type="submit" value="提交" />
</form>

需求1：让页面上所有div字体颜色变蓝色

需求2：让页面上所有class为red的元素背景色变红色

需求3：获取页面上name为 username 和 gender的元素，并输出其value属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="red">div1</div>
<div>div2</div>
<div class="red">div3</div>

<p>p1</p>
<p class="red">p2</p>
<p>p3</p>

<form action="#">
    用户名：<input type="text" name="username" value="suoge"/>
    密码： <input type="password" name="password" value="123"/>
    性别：<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女
    <input type="submit" value="提交"/>
</form>
<script type="text/javascript">
    // 需求1：让页面上所有div字体颜色变蓝色
    //1.1获取页面中所有的div
    let arrDivs = document.getElementsByTagName('div');
    //1.2遍历数组
    for (let i = 0; i < arrDivs.length; i++) {
        let oDiv = arrDivs[i];
        //使用对象oDiv操作css样式
        oDiv.style.color = 'blue';
    }
    // 需求2：让页面上所有class为red的元素背景色变红色
    //2.1根据class属性值获取所有class属性值是red的标签
    let arrReds = document.getElementsByClassName('red');
    //2.2遍历数组取出每个标签
    for (let i = 0; i < arrReds.length; i++) {
        let oRed = arrReds[i];
        //2.3使用对象操作css样式
        oRed.style.backgroundColor = 'red';
    }
    // 需求3： 获取页面上name为 username 和 gender的元素，并输出其value属性的值
    //document.getElementsByName('username')获取的是一个数组，数组中只有一个标签用户名：<input type="text" name="username" value="suoge"/>
    //document.getElementsByName('username')[0] 取出数组索引是0的标签对象
    let oUsername = document.getElementsByName('username')[0];
    //使用标签对象oUsername调用函数获取value属性值
    console.log(oUsername.getAttribute('value'));

    //获取name是gender的元素，并输出其value属性的值
    console.log(document.getElementsByName('gender')[0].getAttribute('value'));//male
    console.log(document.getElementsByName('gender')[1].getAttribute('value'));//female
</script>
</body>
</html>

小结：

1.根据标签id属性值获取标签对象：

document.getElementById(id名称);

2.根据标签名获取标签的数组：

 let arrDivs = document.getElementsByTagName('标签名');

3.根据name属性值获取标签的数组：

 let arr = document.getElementsByName('name属性值')

4.根据class属性值获取的数组：

let arrReds = document.getElementsByClassName('class属性值');

3新增元素（增）

方法名	描述
document.createElement(元素名称)	在页面上根据标签名来创建元素，返回创建的标签（元素）对象注意：只能从document下面去创建元素
parentNode.appendChild(要添加的元素对象);	在某一个父级元素（标签)下面去添加一个元素，每次添加到父级元素的最后面，相当于一个追加的操作
parentNode.insertBefore(要添加的元素对象，在谁的前面添加);	在某一个父级元素（标签)下面去添加一个元素，可以指定在哪一个子元素（标签）的前面添加

【1】练习1：

<ul>
	<li>bbb</li>
</ul>

需求1：创建一个li添加到ul的最后面

需求2：再次添加一个li要求添加到ul的第一个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>bbb</li>
</ul>
<script type="text/javascript">
    // 需求1： 创建一个li添加到ul的最后面
    //1.1创建li标签
    let oLi = document.createElement('li');//<li></li>
    //1.2给新创建的li标签添加文本 <li>ccc</li>
    oLi.innerHTML = 'ccc';
    //1.3获取ul标签对象  document.body 获取body标签
    let oUl = document.body.children[0];
    //1.4使用ul标签对象调用函数将创建的li追加到ul的最后的子标签位置
    oUl.appendChild(oLi);

    // 需求2： 再次添加一个li要求添加到ul的第一个位置
    //2.1创建li标签
    let oLi2 = document.createElement('li');//<li></li>
    //2.2给新创建的li标签添加文本 <li>aaa</li>
    oLi2.innerHTML = 'aaa';
    //2.3使用父标签对象oUl调用函数：parentNode.insertBefore(要添加的元素对象，在谁的前面添加);将创建的li标签添加到ul的第一个位置
    // oUl.children[0] 获取的是此时ul中的第一个子标签<li>bbb</li>
    oUl.insertBefore(oLi2, oUl.children[0]);

</script>
</body>
</html>

小结：

1.创建标签：

document.createElement('标签名')

2.添加父标签的最后一个孩子位置：

父标签对象.appendChild(子标签对象)

3.向父标签的指定位置添加：

父标签对象.inertBefore(要添加的子标签对象,添加到哪个子标签前面的对象)

4删除元素（删）

方法名	描述
element.remove();掌握	删除当前的元素（标签）掌握

【1】练习1：

<ul>
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
</ul>

需求：删除第一个li标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<script type="text/javascript">
    //需求：删除第一个li标签。 element.remove();掌握删除当前的元素（标签）掌握
    document.getElementsByTagName('li')[0].remove();
</script>
</body>
</html>

小结：

删除：删除标签对象.remove();

攒了一袋星辰

关注

15
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中DOM详细介绍 , 元素的增删

DOM:document object model 文档对象模型。用来操作html页面中所有html标签的。在使用dom操作html标签之前，浏览器会将html页面中的标签加载到内存中形成一个dom树，上面最大的对象时document。我们可以通过document调用属性或者函数获取html标签。
复制链接

扫一扫