DOM

最新推荐文章于 2022-08-07 15:31:14 发布

xiaozhang___

最新推荐文章于 2022-08-07 15:31:14 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/xiaozhang___/article/details/80535344

html 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript进行DOM操作，包括创建元素节点、文本节点、添加子节点、克隆节点、插入节点、替换元素及删除元素等核心操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM的添加：

  <
  script
  >
 

  创造元素节点document.createElement(元素名称)
 

  var 
  div1
  =
  document
  .
  createElement
  (
  "div"
  );
 

  创建一个,文本节点
 

  var 
  text1
  = 
  document
  .
  createTextNode
  (
  "666"
  )
 

  添加子节点
 

  div1
  .
  appendChild
  (
  text1
  );
 

  如果要想看到刚才创建的div袁术，必须要再body上添加改子节点
 

  var 
  body1
  =
  document
  .
  getElementsByTagName
  (
  "body"
  )[
  0
  ];
 

  body1
  .
  appendChild
  (
  div1
  );
 

  

 

  克隆节点--浅克隆:cloneNode(false)
 

  var 
  div2
  =
  div1
  .
  cloneNode
  ();
 

  body1
  .
  appendChild
  (
  div2
  );
 

   

  

  克隆节点--深克隆
 

  var 
  div3
  =
  div1
  .
  cloneNode
  (
  true
  );
 

  body1
  .
  appendChild
  (
  div3
  );
  

 

  

 

  

 

  根据位置插位添加
 

  var 
  p1
  =
  document
  .
  createElement
  (
  "p"
  );
 

  添加到指定位置
 

  body1
  .
  insertBefore
  (
  p1
  ,
  div3
  );
 

  // body1.insertBefore(p1,body1.children[3]);等效的
 

  

 

  

 

  替换元素修改
 

  var 
  div4
  =
  document
  .
  createElement
  (
  "div"
  );
 

  var 
  a1
  =
  document
  .
  createElement
  (
  "a"
  );
 

  var 
  text2
  =
  document
  .
  createTextNode
  (
  "跳转"
  );
 

  a1
  .
  appendChild
  (
  text2
  );
 

  div4
  .
  appendChild
  (
  a1
  );
 

  a1
  .
  href
  =
  "http://localhost:63342/untitled1/%E8%BF%94%E8%BF%98%E7%BD%91/%E8%BF%94%E8%BF%98%E7%BD%91.html"
  ;
 

  

 

  替换replace（新元素，老元素）
 

  body1
  .
  replaceChild
  (
  div4
  ,
  p1
  );
 

  

 

  删除元素
 

  body1
  .
  removeChild
  (
  div1
  );
 

  

 

  </
  script
  >
 

  

 