JavaScript DOM对象操作详解

2022-12-06 19:15:51

获得DOM对象

DOM：文档对象模型，而浏览器就是一个DOM树形结构。

针对DOM的操作，有：

更新：更新DOM节点（修改）

遍历：得到DOM节点

删除：删除一个DOM节点

添加：添加一个DOM节点

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

使用原生代码获取

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

<script>
  // 对应CSS选择器
  let h1 = document.getElementsByTagName('h1');
  let p1 = document.getElementById('p1');
  let p2 = document.getElementById('p2');

  let father = document.getElementById('father');
  let child = father.children;  // 获取父节点下的所有子节点
    father.firstChild // 第一个子节点
    father.lastChild //第二个子节点
</script>

使用jQuery代码获取

//todo

更新节点

<div id="id01"></div>

<script>
  let div01 = document.getElementById('id01');
    // 设置文本内容
    div01.innerText='123'; // 修改文本的值
    div01.innerHTML='<strong>456</strong>'; // 解析HTML标签
    // 修改CSS样式
    div01.style.color="red"; // 属性使用字符串
    div01.style.fontSize='200px'; // _下划线转驼峰命名问题
    div01.style.padding='2em';
</script>

删除节点

删除节点的步骤

获取父节点
使用.removechild(NodeName)删除

<div id="id02">
  <h1 id="h1">h1</h1>
  <h2 id="h2">h2</h2>
  <h3 id="h3">h3</h3>
</div>

<script>
    let self = document.getElementById('h2'); // 获得节点自身
    let father = self.parentNode; // 获得节点的父节点
        father.removeChild(father.children[0]); // 删除是一个动态更新的过程
        father.removeChild(father.children[0]); // 删除children[0]后，最末节点的index变为了1
        father.removeChild(father.children[0]);
</script>

需要注意的是，删除是一个动态更新的过程，删除children[0]后，最末节点的index变为了1。

插入节点

我们已经获得了某个DOM节点，假设这个节点是空的，那么我们可以通过innerHTML操作增加一个元素，但是如果此DOM节点已经存在元素了，就不能使用该方法了，否则就会出现覆盖。

通常使用追加(appendChild())方式插入节点。

<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>
    //把js节点添加进list节点中
  let
		js = document.getElementById('js')
		list = document.getElementById('list')
  list.appendChild(js)
</script>

通过appendChild()后的效果：

通过创建新节点后插入的方式：

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

<script>
  // 通过js创建一个新节点
  let newP = document.createElement('p') // 创建一个p标签
  newP.id = 'newP' // 修改p标签的id
  newP.innerText='Hello, World!' // 修改p标签的内容
    
  list.appendChild(newP) //  插入操作
</script>

<script>
  // 将js代码引入到html文件中
  let myScript = document.createElement('script')
  myScript.setAttribute('type','text/javascript') // 通用的设置标签属性方式
  myScript.innerText='alert(true)'

  list.appendChild(myScript)
</script>

<script>
  // 将css代码引入到html文件中
  let myStyle = document.createElement('style')
  myStyle.setAttribute('type','text/css')
  myStyle.innerHTML = 'body{background-color: chartreuse}'

  list.appendChild(myStyle)
</script>

效果：

在新建完节点后，一定要记得将节点用appendChild()引入到父节点中。

码农公寓