欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

Javascript 基础知识：常见的 Dom 基本操作

最编程 2024-04-12 12:27:57
...

一、文档元素选取

1.1、ID选择器

通过ID选取元素是最简单和常用的选取元素的方法，ID选择器性能优于其他选择器

var title = document.getElementById("title");

ID不存在，则返回null

1.2、名称选择器

基于name属性的值选取元素区别于ID选择器。

其一： name属性值 不是必须惟一，多个元素可以能同样的名称； 其二： name属性只在少数HTML元素中有效，包括表单、表单元素、iframe以及img 元素

var sports = document.getElementsByName("sports");

ID不存在，则返回null

1.3、标签选择器

利用HTML元素的标签名称选取指定类型的元素

var h1 = document.getElementsByTagName("h1");
1.4、类选择器

利用HTML的class属性值选择元素

var title = document.getElementsByClassName("title");
1.5、CSS单元素选择器

通过CSS样式表选择器的强大语法，来选择元素。 返回第一个匹配的元素

var title = document.querySelector("#title");   // CSS ID选择
var h1 = document.querySelector("h1");     //选取第一个h1元素
1.6、CSS多元素选择器

通过CSS样式表选择器的强大语法，来选择元素。 返回元素数组

var h1s = document.querySelectorAll("h1");   //返回所有h1标签元素

二、Dom遍历

2.1 节点相关
2.1.1 父节点-parentNode

返回父节点，如果document 对象调用则返回 null

 var title = document.querySelector("#title");
 title.parentNode.style.color = "red";
2.1.2 子节点-childNodes

返回所有子节点，即NodeList对象

  var parent = document.querySelector("#parent");
  var children = parent.childNodes;
  for(var i =0; i< children.length; i++) {
  	console.log(i+"="+children[i].nodeName);
  }
  console.log(children.length);
2.1.3 首子节点-firstChild

返回第一个子节点

  var parent = document.querySelector("#parent");
  var first = parent.firstChild;
  first.style.color = "red";
2.1.4 首子节点-lastChild

返回最后一个子节点

  var parent = document.querySelector("#parent");
  var last = parent.lastChild;
  last.style.color = "red";
2.1.5 下一兄弟节点-nextSibling

返回下一个兄弟节点

 var title = document.querySelector("#title");
  var next = title.nextSibling;
  next.style.color = "red";
2.1.6 前一兄弟节点-previousSibling

返回前一个兄弟节点

  var title = document.querySelector("#title");
  var pre = title.previousSibling;
  pre.style.color = "red";
2.1.7 节点类型-nodeType

返回节点类型的数字表示

 1-代表Element节点
 3-代表Text节点
 8-代表Comment节点
 9-代表Document节点
 11-代表DocumentFragment节点
2.1.8 节点值-nodeValue

返回Text 节点 或 Comment 节点的值

  var title = document.querySelector("#title");
  console.log(title.firstChild.nodeValue);
2.1.9 节点名-nodeName

返回元素的标签名，以大写形式表示

  var title = document.querySelector("#title");
  console.log(title.nodeName);
  console.log(title.firstChild.nodeName);
2.2 元素相关
2.2.1 子元素-children

返回所有子元素

  var parent = document.querySelector("#parent");
  var children = parent.children;
  for(var i =0 ;i < children.length; i++) {
  	children[i].style.color = "red";
  }
  console.log(children.length);
2.2.2 首子元素-firstElementChild

返回所有子元素中的第一个（节点是元素的一种）

  var parent = document.querySelector("#parent");
  var first = parent.firstElementChild;
  first.style.color = "red";
2.2.3 尾子元素-lastElementChild

返回所有子元素中的最后一个

  var parent = document.querySelector("#parent");
  var last = parent.lastElementChild;
  last.style.color = "red";
2.2.4 下一兄弟元素 nextElementSibling

返回下一个兄弟元素

  var title = document.querySelector("#title");
  var next = title.nextElementSibling;
  next.style.color = "red";
2.2.5 下一兄弟元素 previousElementSibling

返回前一个兄弟元素

  var title = document.querySelector("#title");
  var previous = title.previousElementSibling;
  previous.style.color = "red";
2.2.6 子元素数量

返回子元素的数量

  var parent = document.querySelector("#parent");
  console.log(parent.childElementCount);

三、属性

3.1 标准属性

表示HTML文档元素的HTMLElement对象定义了读/写属性，它们对应于元素的HTML属性。 HTMLElement定义的通用HTML属性，包括id、lang、dir、事件处理程序onclick及表单相关属性等。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - JavaScript DOM操作之标准属性</title>
    <script src="http://res.30ke.cn/res/js/console.js"></script>
</head>
<body>
  <form id="myform">
    <input type="text" value="毛瑞" />  
  </form>
  <div id="main"></div>
<script>
  var form = document.querySelector("#myform");
  form.action = "http://30ke.cn";
  form.method = "post";
  console.log(form.id);
  console.log(form.action);
  console.log(form.method);
</script>
</body>
</html>
3.2 非标准属性
3.2.1 获取属性值 - getAttribute

返回非标准的HTML属性的值

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.getAttribute("width"));
</script>
</body>
3.2.2 属性值设置 - setAttribute

设置非标准的HTML属性的值

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.setAttribute("width","400px");
  console.log(img.getAttribute("width"));
</script>
</body>
3.2.3 属性存在检测 - hasAttribute

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

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.hasAttribute("width"));
  console.log(img.hasAttribute("height"));
</script>
</body>
3.2.4 删除属性 - removeAttribute

删除某一属性

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.removeAttribute("width");
  console.log(img.getAttribute("width"));
</script>
</body>
3.3 数据集属性- dataset

在HTML5文档中，任意以 data- 为前缀的小写的属性名字都是合法的。这些 “数据集属性” 定义了一种标准的、附加额外数据的方法

<body>
  <img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  var x = img.dataset.x;
  console.log(x);
</script>
</body>
3.4 元素属性 - attributes

Node节点定义了 attributes 属性，针对 Element 对象，attributes 是元素所有属性的类数组对象

var attributes = img.attributes;

索引 attributes 对象得到的值是 Attr 对象。Attr 的 name 和 value 返回该属性的名字和值

<body>
  <img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  var attributes = img.attributes;
  console.log(attributes[0].name+" : "+ attributes[0].value);
  console.log(attributes.src.value);
  console.log(attributes["width"].value);
</script>
</body>

四、元素内容

4.1 元素内容 - innerHTML

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

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  parent.innerHTML = "<h1>三十课</h1>";
  alert(parent.innerHTML);
</script>
</body>
4.2 元素及内容 - outerHTML

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

<body>
  <div id="parent">三十课</div>
<script>
  var parent = document.querySelector("#parent");
  alert(parent.outerHTML);
  parent.outerHTML = "<h1>三十课</h1>";  // 注意：div 变成了 h1
</script>
</body>
4.3 纯文本元素内容 - textContent

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

<body>
  <h1 id="title">三十课</h1>
  <div id="main"></div>
<script>
  var title = document.querySelector("#title");
  console.log(title.textContent);
  title.textContent = "三十课2";
</script>
</body>

五、创建节点

5.1 创建元素节点 - createElement

使用document 对象的createElement () 方法创建新的Element节点

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  var h1 = document.createElement("h1");
  h1.textContent = "三十课";
  parent.appendChild(h1);
</script>
</body>
5.2 创建文本节点 - createTextNode

创建纯文本节点

<body>
  <h1 id="title"></h1>
<script>
  var title = document.querySelector("#title");
  var txt = document.createTextNode("三十课");
  title.appendChild(txt);
</script>
</body>
5.3 创建文档片段 - createDocumentFragment

使用文档片段通常会带来更好的性能。因为文档片段存在于内存中，并不在Dom树中，所以将子元素插入到文档片段时不会引起页面回流 （对元素位置和几何上计算）

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  var fragment = document.createDocumentFragment();
  var h1 = document.createElement("h1");
  h1.textContent = "三十课";
  fragment.append(h1);
  parent.append(fragment);
</script>
</body>
5.4 创建注释节点 -- createCmoment

创建注释节点不经常使用

<body>
  <h1 id="title">三十课</h1>
<script>
  var title = document.querySelector("#title");
  var comment = document.createComment("Created by 毛瑞");
  title.appendChild(comment);
</script>
</body>
5.5 节点克隆 -- cloneNode

通过复制已存在的节点来创建新的文档节点。传参数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>

六、插入节点

6.1 插入自节点 -- appendChild

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

<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>
6.2 节点前插入 -- insertBefore
1. 在父节点上调用本方法

2. 第一参数表示待插入的节点

3. 第二参数是父节点中已经存在的子节点，新节点插入到该节点的前面

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

七、删除和替换

7.1 删除子节点 -- removeChild
1. 在父节点上调用

2. 参数是待删除的节点


<body>
  <div>
    <h1>三十课</h1>
    <h2 id="subTitle">毛瑞的笔记本</h2>
  </div>
<script>
  var h2 = document.querySelector("#subTitle");
  h2.parentNode.removeChild(h2);
</script>
</body>
7.2 替换子节点 -- replaceChild
1. 在父节点上调用

2. 第一参数是新节点

3. 第二个参数是需要替换的节点


<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>

上一篇： vue3 mixins watch

下一篇： vue3 mixin script setup

推荐阅读