ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript DOM对象操作详解

2021-05-15 18:30:20  阅读:153  来源: 互联网

标签:DOM list JavaScript father 详解 let document 节点


获得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()后的效果:

20210515-171303-0529.png

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

<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()引入到父节点中。

标签:DOM,list,JavaScript,father,详解,let,document,节点
来源: https://blog.csdn.net/Huuc6/article/details/116858419

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有