操作DOM对象

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

JavaScript操作DOM能干什么

  • 改变页面中的所有 HTML 元素
  • 改变页面中的所有 HTML 属性
  • 改变页面中的所有 CSS 样式
  • 对页面中的所有事件做出反应

DOM节点的获取

<body>
<div id = 'div'>
<p id = 'p1'>hello world</p>
<p id = 'p2'>hello world</p>
<p class = 'p3'>hello world</p>
</div>
</body>

<script>
// 获取DOM节点的三种方式
var p1 = document.getElementById('p1');
var p2 = document.getElementsByTagName('p2');
var p3 = document.getElementsByClassName('p3');
var div = document.getElementById('div');
// 获取父节点的所有子节点
var father = div.children;
</script>


DOM节点的更新

    // 更新DOM节点
p1.innerText = '你好世界';
p1.style.color = 'red';  //属性使用字符串
p1.style.fontSize = '20px';  // 使用驼峰命名法


DOM节点的删除

先通过当前节点找到父节点，再通过父节点的方法删除自己，删除多个节点的时候，一定要注意节点的删除的动态更新的

    var p1 = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1)


DOM节点的插入

当我们获得某个dom节点时，

如果这个dom节点的元素是空的，那么我们可以直接通过innerText和innerHTML方法来修改元素，

如果元素不为空，那么就不能这么做，因为会覆盖掉原来的元素，这个时候就要使用追加操作

<body>
<p id='insert'>即将插入的文本</p>
<div id='div'>
<p id='p1'>hello world</p>
<p id='p2'>hello world</p>
<p class='p3'>hello world</p>
</div>
</body>

<script>

// 添加新的dom节点
var insert = document.getElementById('insert');
var div = document.getElementById('div');
div.appendChild(insert);
</script>


创建一个新的标签,实现节点的插入

<script>
// 创建一个新的标签
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = "新创建的文本";
div.appendChild(newP);

// 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
div.appendChild(myScript);
</script>


Demo案例

<!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>
<p id='insert'>即将插入的文本</p>
<div id='div'>
<p id='p1'>hello world</p>
<p id='p2'>hello world</p>
<p class='p3'>hello world</p>
</div>
</body>

</html>

<script>
// 获取DOM节点的三种方式
var p1 = document.getElementById('p1');
var p2 = document.getElementsByTagName('p2');
var p3 = document.getElementsByClassName('p3');
var div = document.getElementById('div');
// 获取父节点的所有子节点
var father = div.children;

// 更新DOM节点
p1.innerText = '你好世界';
p1.style.color = 'red';
p1.style.fontSize = '20px';

// 添加新的dom节点
var insert = document.getElementById('insert');
var div = document.getElementById('div');
div.appendChild(insert);

// 创建一个新的标签
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = "新创建的文本";
div.appendChild(newP);

// 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
div.appendChild(myScript);

</script>


Love and Share