DOM操作精要-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45683851/article/details/104119253

操作DOM对象

DOM:文档浏览模型

核心

浏览器网页就是一个Dom 树形结构！

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
     var h1 = document.getElementsByTagName('h1');
     var p1 = document.getElementById('p1');
     var p2 = document.getElementsByClassName('p2');
     var father = document.getElementById('father');
    
     var childrens = father.children[index]; //获取父节点下的所有子节点
	// father.firstChild 找到第一个节点
    // father.lastChild 找到最后一个节点
</script>
</body>
</html>

图1========================

要掌握得到节点的方法。

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="id1">

</div>

<script>
     var id1 = document.getElementById('id1');

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

图2=======================

操作文本

id1.innerText='456' 修改文本的值
id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作css

id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'

注意：赋字符串类型的值。

删除节点

删除节点的步骤： 先获取父节点，在通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
   var self = document.getElementById('p1');
   var father =  p1.parentElement;//获得父节点
   father.removeChild(self);//干掉自己
    
    //通过下边得到节点
    // 删除是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    //在这个删除的过程中，第三条删除语句会报错，因为动态过程。
</script>

注意：删除是一个动态的过程，删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是若这个DOM 节点已经存在元素了，我们就不能这么干了！因为会产生覆盖。

追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);// 追加到后面
</script>
</body>
</html>

效果：

图3===========================

创建一个新的标签，实现插入

<script>

    var js = document.getElementById('js'); //已经存在的节点
    var list = document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');// 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,java';
    // 创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
	/*与它的作用一样<script type="text/javascript" src=""></script>*/

    // 可以创建一个Style标签
    var myStyle= document.createElement('style'); //创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    /*与它的作用一样<link rel="stylesheet" href="" type="text/css">*/
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

图4================

insertBefore

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="" type="text/css">
    <script type="text/javascript" src=""></script>

</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>

    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    // 要包含的节点.insertBefore(newNode,targetNode)
	// 我们要把新节点插在目标节点的前面。
    list.insertBefore(js,ee);

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

图5======================