JS-----DOM基本操作

最新推荐文章于 2024-03-14 19:32:21 发布

背地里装个英雄

最新推荐文章于 2024-03-14 19:32:21 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/qq_44193064/article/details/103832933

版权

一.DOM对象的常用方法:

如下表:

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement())	创建元素节点。
createTextNode()	创建文本节点。。
getAttribute()	返返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。。

二.实战:

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div class="parent" id="div1">
    <p id="demo" class="demo">Hello World!</p>
    <p class="demo">text2</p>
    <p>text3</p>
    <input type="text" id="input">
</div>


<script>
//查找节点方法
//    a=document.getElementById("demo");
//    console.log(a);

//    b=document.getElementsByClassName("demo");
//    console.log(b[1]);

//    c=document.getElementsByTagName("p");
//    console.log(c[2]);

//新建节点的方法
//    a=document.createElement("h2");
//    console.log(a);

//    b=document.createAttribute("disabled");
//    console.log(b);

//    c=document.createTextNode("nice to meet you");
//    console.log(c);

//添加新节点的方法
//    a=document.getElementById("input");
//    a.setAttribute("disabled","disabled");

//    a=document.getElementById("input");
//    attr = document.createAttribute("disabled");
//    attr.value = "disabled";
//    a.setAttributeNode(attr);

//    var para=document.createElement("p");
//    var node=document.createTextNode("这是一个新段落。");
//    para.appendChild(node);
//    var element=document.getElementById("div1");
//    element.appendChild(para);

//    var para=document.createElement("p");
//    var node=document.createTextNode("这是一个新段落。");
//    para.appendChild(node);
//    var element=document.getElementById("div1");
//    existingChild=document.getElementById("demo");
//    element.insertBefore( para, existingChild );

//删除节点的方法
//    var element=document.getElementById("div1");
//    a=document.getElementById("demo");
//    element.removeChild(a);

//    a=document.getElementById("demo");
//    a.parentNode.removeChild(a);

//修改节点的方法
//    var para=document.createElement("p");
//    var node=document.createTextNode("这是一个新段落。");
//    para.appendChild(node);
//    var element=document.getElementById("div1");
//    a=document.getElementById("demo");
//    element.replaceChild(para,a);

//    a=document.getElementById("input");
//    a.setAttribute("type","button");

//    a=document.getElementById("input");
//    attr = document.createAttribute("type");
//    attr.value = "button";
//    a.setAttributeNode(attr);



</script>
</body>
</html

一些常用方法集合:

1.一些常用的 HTML DOM 方法：
 getElementById(id) - 获取带有指定 id 的节点（元素） 
appendChild(node) - 插入新的子节点（元素） 
removeChild(node) - 删除子节点（元素） 


  2.  一些常用的 HTML DOM 属性：
 innerHTML - 节点（元素）的文本值 
 parentNode - 节点（元素）的父节点 
 childNodes - 节点（元素）的子节点 
 attributes - 节点（元素）的属性节点 


3. 查找节点：
  getElementById() 返回带有指定 ID 的元素。 
 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 
  getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 

  4.  增加节点：
  createAttribute() 创建属性节点。 
  createElement() 创建元素节点。 
   createTextNode() 创建文本节点。 
	insertBefore() 在指定的子节点前面插入新的子节点。 
	appendChild() 把新的子节点添加到指定节点。 
 
5.删除节点：
removeChild() 删除子节点。 
replaceChild() 替换子节点。 
 
修改节点：
setAttribute()  修改属性
setAttributeNode()  修改属性节点

背地里装个英雄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-----DOM基本操作

一.DOM对象的常用方法:如下表:方法描述getElementById()返回带有指定 ID 的元素。getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。appendChild()把新的子节点添加到指定节...
复制链接

扫一扫