2.3DOM操作

最新推荐文章于 2023-08-04 08:47:36 发布

菜鸟小黑成长史

最新推荐文章于 2023-08-04 08:47:36 发布

阅读量189

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cainiaoqifeiji/article/details/104931409

版权

本文详细介绍了DOM操作，包括节点选择（getElementById, getElementsByTagName, getElementsByClassName, getByName），创建元素（createElement, createTextNode），节点操作（appendChild, insertBefore, replaceChild, removeChild），节点关系（parentNode, childNodes, nextSibling, previousSibling, firstChild, lastChild, Children），属性操作（setAttribute, removeAttribute, getAttribute, hasAttribute）以及事件处理（addEventListener, removeEventListener, 阻止默认与冒泡事件）。此外，还讨论了事件的捕获与冒泡概念及HTML常见事件列表。" 103486399,8077923,哈希表查找与冲突解决,"['数据结构', '哈希', '算法', '冲突解决']

摘要由CSDN通过智能技术生成

一、节点选择

1. getElementById（）

主要根据 id 属性，返回某一个
返回一个特定的 id 元素。id 是大小写敏感的字符串，代表了所要查找的元素的唯一ID，如果没有则返回null，有的话就返回一个节点。如果新建一个元素，还没有插入到文档中，则不能通过该方法获取到

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>
   <style type="text/css">
    div{
   
     border: 1px solid blueviolet;
    }
   </style>
  </title>
 </head>
 <body>
  <div id="div1" name="d1">
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
  </div>
  <script type="text/javascript">
   let div2=document.getElementById('div2');
   console.log(div2);
  </script>
 </body>
</html>

在这里插入图片描述
2.getElementsByTagName()

返回list
document.getElementsByTagName()方法返回一个实时的包含具有给出标签名的元素们的HTMLCollection。指定的元素的子树会被搜索，包括元素自己。返回的 list 是实时的，意味着它会随着DOM树的变化自动更新。因此，如果对同一个元素，使用相同的参数，是不需要多次调用document.getElementsByTagName()的。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>
   <style type="text/css">
    div{
   
     border: 1px solid blueviolet;
    }
   </style>
  </title>
 </head>
 <body>
  <div id="div1" name="d1">
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
  </div>
  <script type="text/javascript">
   let divs=document.getElementsByTagName('div');
   console.log(divs);
   console.log(divs[1]);
   console.log(divs[0]);
  </script>
 </body>
</html>

在这里插入图片描述
3.getElementsByName()

主要根据 name 属性
返回一个实时的nodelist
理论上id是不可以重名的，name是可以重名的，如果有重名的就会返回一组

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>
   <style type="text/css">
    div{
   
     border: 1px solid blueviolet;
    }
   </style>
  </title>
 </head>
 <body>
  <div id="div1" name="d1">
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
  </div>
  <script type="text/javascript">
   let d1=document.getElementsByName('d1');
   console.log(d1);
  </script>
 </body>
</html>

在这里插入图片描述
4.getElementsByClassName（）

根据class属性，返回节点树

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>
   <style type="text/css">
    div{
   
     border: 1px solid blueviolet;
    }
   </style>
  </title>
 </head>
 <body>
  <div id="div1" name="d1">
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4" class="c4">4</div>
  </div>
  <script type="text/javascript">
   let c4=document.getElementsByClassName('c4');
   console.log(c4);
  </script>
 </body>
</html>

在这里插入图片描述

二、创建元素

1.创建元素

document.createElement（）
使用document.createElement（）可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML中不区分大小写，在XHTML中区分大小写。

let div=document.createElement(‘div’);

使用createElement（）方法可以创建新元素的同时，也为新元素设置了ownerDocument属性，可以操作元素的特性。

div.id=“myDiv”;
div.className=“div1”

2.创建文本节点

文本也是节点
document.createTextNode（）

三、节点操作

1.追加

appendChild（）：用于向childNodes列表的末尾添加一个节点，并返回这个新增节点。如果传入到appendChild()里的节点已经是文档的一部分了，那结果就是将节点从原来的位置转移到新位置，任何一个节点不能同时出现在文档中的多个位置。

<!DOCTYPE html>

最低0.47元/天解锁文章

菜鸟小黑成长史

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.3DOM操作

节点选择（getElementById,getElementsByTagName,getElementsByName,getElementsByClassName）、节点操作（appendChild，insertBefore，replaceChild，removeChild）、创建元素（createElement，createTextNode）、节点关系、属性操作、事件、获取节点相关值
复制链接

扫一扫