15、DOM常见的操作方式

最新推荐文章于 2023-01-02 10:51:19 发布

yxiuzhu

最新推荐文章于 2023-01-02 10:51:19 发布

阅读量2k

点赞数

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

本文链接：https://blog.csdn.net/haotian1997/article/details/114824921

版权

JavaScript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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

15.1 创建DOM节点

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

1. 元素节点

创建一个div

var div = document.createElement('div');
cnosole.log(div);

2. 属性节点

属性节点包含两类，

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

基本属性既可以通过如下方式设置，也可以通过 createAttribute 方式设置。

document.body.id = 'container';

注意：自定义属性是一定要使用 createAttribute 方式来创建的。
比如创建一个自定义属性 custom 。

var dataAttribute = document.createAttribute('custom');
cnosole.log(dataAttribute);

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>

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

15.3 DOM属性修改

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>

2 非标准属性
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>

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>

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>

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 数据集属性- 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>

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>

5 元素内容

5.1 元素内容 - innerHTML

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

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  parent.innerHTML = "<h1>三十课</h1>";
  alert(parent.innerHTML);
</script>
</body>

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

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

15.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标签元素

15.5 DOM插入

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>

2. 节点前插入 – insertBefore

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

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

3. 添加到节点的后面

没有这个函数 😶 可以使用 insertBefore 方法和 nextSibling 来模拟它

parentDiv.insertBefore(sp1, sp2.nextSibling);

如果sp2没有下一个节点，则它肯定是最后一个节点，则sp2.nextSibling返回null，且sp1被插入到子节点列表的最后面（即sp2后面）

DOM遍历

1 节点相关
1.1 父节点-parentNode

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

 var title = document.querySelector("#title");
 title.parentNode.style.color = "red";

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

1.3 首子节点-firstChild

返回第一个子节点

  var parent = document.querySelector("#parent");
  var first = parent.firstChild;
  first.style.color = "red";

1.4 首子节点-lastChild

返回最后一个子节点

  var parent = document.querySelector("#parent");
  var last = parent.lastChild;
  last.style.color = "red";

1.5 下一兄弟节点-nextSibling

返回下一个兄弟节点

 var title = document.querySelector("#title");
  var next = title.nextSibling;
  next.style.color = "red";

1.6 前一兄弟节点-previousSibling

返回前一个兄弟节点

  var title = document.querySelector("#title");
  var pre = title.previousSibling;
  pre.style.color = "red";

1.7 节点类型-nodeType

返回节点类型的数字表示
1-代表Element节点
3-代表Text节点
8-代表Comment节点
9-代表Document节点
11-代表DocumentFragment节点

1.8 节点值-nodeValue

返回Text 节点或 Comment 节点的值

  var title = document.querySelector("#title");
  console.log(title.firstChild.nodeValue);

1.9 节点名-nodeName

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

  var title = document.querySelector("#title");
  console.log(title.nodeName);
  console.log(title.firstChild.nodeName);

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 首子元素-firstElementChild

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

  var parent = document.querySelector("#parent");
  var first = parent.firstElementChild;
  first.style.color = "red";

2.3 尾子元素-lastElementChild

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

  var parent = document.querySelector("#parent");
  var last = parent.lastElementChild;
  last.style.color = "red";

2.4 下一兄弟元素 nextElementSibling

返回下一个兄弟元素

  var title = document.querySelector("#title");
  var next = title.nextElementSibling;
  next.style.color = "red";

2.5 下一兄弟元素 previousElementSibling

返回前一个兄弟元素

  var title = document.querySelector("#title");
  var previous = title.previousElementSibling;
  previous.style.color = "red";

2.6 子元素数量

返回子元素的数量

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

参考文章

Javascript基础篇: 常见的Dom基本操作方法