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

时间 2019-11-17

标签 javascript 基础常见的 dom 基本方法栏目 JavaScript 繁體版

原文原文链接

1、文档元素选取

1.一、ID选择器

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

var title = document.getElementById("title");
复制代码

ID不存在，则返回nullnode

1.二、名称选择器

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

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

var sports = document.getElementsByName("sports");
复制代码

ID不存在，则返回nullapp

1.三、标签选择器

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

var h1 = document.getElementsByTagName("h1");
复制代码

1.四、类选择器

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

var title = document.getElementsByClassName("title");
复制代码

1.五、CSS单元素选择器

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

var title = document.querySelector("#title");   // CSS ID选择
var h1 = document.querySelector("h1");     //选取第一个h1元素
复制代码

1.六、CSS多元素选择器

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

var h1s = document.querySelectorAll("h1");   //返回全部h1标签元素
复制代码

2、Dom遍历

2.1 节点相关

2.1.1 父节点-parentNode

返回父节点，若是document 对象调用则返回 nullcode

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、属性

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、元素内容

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、建立节点

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、插入节点

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、删除和替换

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>
复制代码