DOM相关操作

最新推荐文章于 2024-10-02 17:15:49 发布

郭大钰

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量141

点赞数 1

文章标签： html js

本文链接：https://blog.csdn.net/m0_46684624/article/details/106985856

版权

DOM元素的获取

1.es5之前获取的方式
1.通过标签名称获取多个元素

<h1>你好</h1>
<h1>hello</h1>
document.getElementsByTagName('h1')

2.通过Id名称获取元素``

<div id='abc'>111</div>
document.getElementById('abc')

3.通过属性class获取多个元素

<div class='abc'>hello1</div>
<div class='abc'>hello2</div>
document.getElementsByclassName('abc')

2.es5之后元素的获取
1.获取单个元素

<h1>你好</h1>
<div id='abc'>111</div>
<div class='abc'>hello1</div>
//元素的获取
//括号里面类似于CSS的选择器选择，如果使用类名进行元素选择，则返回最先匹配到的第一个对象
document.querySelector('h1');
document.querySelector('#abc');
document.querySelector('.abc');

2.获取多个元素

<div class='abc'>hello1</div>
<div class='abc'>hello2</div>
//获取所有匹配到的元素对象
document.querySelectorAll('abc');

DOM节点并不是孤立的，因此可通过DOM节点之间的相对关系对他们进行访问。
1.获取元素的父元素/节点 parentElement / parentNode
2.获取子元素/节点 children / childNode
3.获取兄弟元素的下一个元素 nextElementSibling
4. 获取兄弟元素的上一个元素 previousElementSibling
5. 获取第一个元素 d1.firstElementChild
6. 获取最后一个元素 lastElementChild

DOM节点的操作

1.添加一个元素


<div class="d1"></div>

  <script type="text/javascript">
   //1.创建元素
   var h1 = document.createElement('h1')
   //2.设置元素
   h1.innerHTML = '你吃饭了吗？';
   //3.插入元素,首先找到被插入元素
   var d1 = document.querySelector('.d1');
   //4.追加子元素
   d1.appendChild(h1)
  </script>

2.删除元素

<div class="d1"></div>
  
  <script type="text/javascript">
   //1.找到被删除的父元素
   var body = document.querySelector('body');
   //2.找到要删除的元素
   var d1 = document.querySelector('.d1');
   //3.删除  父元素.removeChild(子元素)
   body.removeChild(d1)
  </script>

3.修改样式

1.通过style属性修改样式
注：1.通过style属性设置的值，优先级是最高的，因为直接修改style属性。
2.在设置background-color时，必须写成backgroundColor

<div id="d1">hello</div>
<script type="text/javascript">
   var d1 = document.querySelector('#d1');
   d1.style.width = '200px';
  </script>

2.通过修改className,从而修改样式

<style type="text/css">
   .bg{
    background-color: aquamarine;
   }
  </style>
 </head>
 <body>
  <div id="d1">hello</div>
  
  <script type="text/javascript">
   var d1 = document.querySelector('#d1');
   d1.className = 'bg';
  </script>