68：DOM常见的操作

最新推荐文章于 2024-07-11 17:37:13 发布

The..Fuir

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量164

点赞数

分类专栏：面试 javascript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_51066068/article/details/125714127

版权

面试同时被 2 个专栏收录

152 篇文章 48 订阅

订阅专栏

javascript

122 篇文章 11 订阅

订阅专栏

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口），描绘了一个层次化的节点树。

1 创建DOM节点

常用的节点类型有如下几种：元素节点、属性节点、文本节点、注释节点

1. 元素节点
创建一个div
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var div=document.createElement('div');
    console.log(div);
  </script>
</body>
</html>

2. 属性节点

属性节点包含两类，

一类是DOM元素的基本属性，
还有一类是自定义属性。

基本属性既可以通过如下方式设置，也可以通过 createAttribute 方式设置。
<body>
  <script>
    var div=document.createElement('div');
    div.id="container";
    console.log(div);
  </script>
</body>
注意：自定义属性是一定要使用 createAttribute 方式来创建的。
比如创建一个自定义属性 custom 。
<script>
    //创建元素节点
    var div=document.createElement('div');
    //设置元素节点的id属性
    div.id="container";
    //自定义属性
    var dataAttribute = document.createAttribute('custom');
    console.log(dataAttribute);
    //输出div节点
    console.log(div);
  </script>
3.文本节点
创建一个内容为“大家好”的文本节点
var textNode = document.createTextNode('大家好');
console.log(textNode);

4.注释节点

创建一个内容为“这一个标签”的注释节点
var comment = document.createComment('这是一个标签');
console.log(comment);

5. 节点克隆

通过复制已存在的节点来创建新的文档节点。传参数true表示深克隆，false表示浅复制

<body>
  <div id="parent">
    <h1 class="title">三十课</h1>
  </div>
<script>
  var parent = document.querySelector("#parent");
  var titles = document.querySelectorAll(".title");
  var title2 = titles[0].cloneNode(true);
  parent.appendChild(title2);
</script>
</body>

2 DOM删除和替换

1. 删除子节点 —— removeChild

在父节点上调用

参数是待删除的节点

<body>
  <div>
    <h1>三十课</h1>
    <h2 id="subTitle">毛瑞的笔记本</h2>
  </div>
<script>
  var h2 = document.querySelector("#subTitle");
  h2.parentNode.removeChild(h2);
</script>
</body>

2. 替换子节点——replaceChild

在父节点上调用
第一参数是新节点
第二个参数是需要替换的节点

<body>
  <div>
    <h1>三十课</h1>
    <h2 id="subTitle">毛瑞的笔记本</h2>
  </div>
<script>
  var h2 = document.querySelector("#subTitle");
  var h2n = document.createElement("h2");
  h2n.textContent = "毛瑞的新笔记本2";
  h2.parentNode.replaceChild(h2n, h2);
</script>
</body>

或者

 //替换子节点
    var h2 = document.querySelector("#delete");
    // var h2n = document.createElement("h2");
    // h2n.textContent = "笔记本";
    // h2.parentNode.replaceChild(h2n, h2);
    h2.textContent="憨憨"

3 DOM属性修改

1. 标准属性

表示HTML文档元素的HTMLElement对象定义了读/写属性，它们对应于元素的HTML属性。 HTMLElement定义的通用HTML属性，包括id、lang、dir、事件处理程序onclick及表单相关属性等。
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
  <form id="myform">
    <input type="text" value="毛瑞" />  
  </form>
  <div id="main"></div>
<script>
  var form = document.querySelector("#myform");
  form.action = "http://";
  form.method = "post";
  console.log(form.id);
  console.log(form.action);
  console.log(form.method);
  var div = document.querySelector("#main");
  div.className="哈哈"
</script>
</body>
</html>

2 非标准属性

2.1 获取属性值 - getAttribute

返回非标准的HTML属性的值

 <img id="img" src="http://" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.getAttribute("width"));
</script>

2.2 属性值设置 - setAttribute

设置非标准的HTML属性的值

  <img id="img" src="http://" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.setAttribute("width","400px");
  console.log(img.getAttribute("width"));
</script>

2.3 属性存在检测 - hasAttribute

返回布尔值，用来检测属性是否存在

 <img id="img" src="http://" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.setAttribute("width","400px");
  console.log(img.getAttribute("width"));
  console.log(img.hasAttribute("width"));
  console.log(img.hasAttribute("height"));
</script>

2.4 删除属性 - removeAttribute

删除某一属性

<img id="img" src="http://" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.setAttribute("width","400px");
  //删除属性
  img.removeAttribute("width");
  console.log(img.getAttribute("width"));
  console.log(img.hasAttribute("width"));
  console.log(img.hasAttribute("height"));
</script>

5 元素内容

5.1 元素内容 - innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent"></div>
  <script>
    var parent = document.querySelector("#parent");
    parent.innerHTML = "<h1>三十课</h1>";
    console.log(parent.innerHTML);
  </script>
  
</body>
</html>

5.2 元素及内容 - outerHTML

outerHTML 属性以字符串形式返回这个元素及内容。也可以用来替换元素当前内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent"></div>
  <script>
    var parent = document.querySelector("#parent");
    // parent.innerHTML = "<h1>三十课</h1>";
    parent.outerHTML = "<h1>三十课</h1>";  // 注意：div 变成了 h1
    // console.log(parent.innerHTML);
    console.log(parent.outerHTML)
  </script>
  
</body>
</html>

5.3 纯文本元素内容 - textContent

查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。在IE中，可以用Element的innerText属性来代替

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="title">三十课</h1>
  <div id="parent"></div>
  <script>
    var parent = document.querySelector("#parent");
    // parent.innerHTML = "<h1>三十课</h1>";
    parent.outerHTML = "<h1>三十课</h1>";  // 注意：div 变成了 h1
    // console.log(parent.innerHTML);
    console.log(parent.outerHTML)

    title.textContent = "三十课2";
    console.log(title.textContent);
  </script>
  
</body>
</html>

4 DOM属性查找

1. id属性查找

通过ID选取元素是最简单和常用的选取元素的方法，ID选择器性能优于其他选择器
查找拥有指定id的第一个元素节点。
ID不存在，则返回null
//例如我们查找一个id属性值为“id”的元素。
var id  = document.getElementById('id');
console.log(id);
2. class属性查找

利用HTML的class属性值选择元素
查找所有带有class指定属性值的元素。
//例如我们查找class属性值为“class”的元素。
var className = document.getElementsByClassName('class');
console.log(className);
3. name属性查找

其一： name属性值不是必须惟一，多个元素可以能同样的名称；
其二： name属性只在少数HTML元素中有效，包括表单、表单元素、iframe以及img 元素
查找所有指定name属性值的元素
//例如我们查找name属性值为name的元素。
var name = document.getElementsByName('name');
console.log(name);

4. 标签名查找

利用HTML元素的标签名称选取指定类型的元素
查找所有指定标签名的元素
//例如我们查找标签名为div的元素。
var tag = document.getElementsByTagName('div');
console.log(tag);
5. css选择器查找
通过CSS样式表选择器的强大语法，来选择元素。
返回第一个匹配的元素
var title = document.querySelector("#title");   // CSS ID选择
var h1 = document.querySelector("h1");     //选取第一个h1元素
返回元素是类数组
var h1s = document.querySelectorAll("h1");   //返回所有h1标签元素

5 DOM插入

1. 插入自节点 – appendChild

在指定元素上插入子节点，并使其成为该节点的最后一个子节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent">
    <h1 id="title">三十</h1>
  </div>
<script>
  var parent = document.querySelector("#parent");
  var h2 = document.createElement("h2");
  h2.textContent = "笔记本";
  parent.appendChild(h2);
</script>
</body>
</html>

2. 节点前插入 – insertBefore

在父节点上调用本方法
第一参数表示待插入的节点
第二参数是父节点中已经存在的子节点，新节点插入到该节点的前面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="parent">
    <h1 id="title">三十</h1>
  </div>
<script>
  //插入子节点
  var parent = document.querySelector("#parent");
  var h2 = document.createElement("h2");
  h2.textContent = "笔记本";
  parent.appendChild(h2);
  //子节点前插入
  var title = document.querySelector("#title");
  var h3=document.createElement("h3");
  title.parentNode.insertBefore(h3,title)
</script>
</body>
</html>