导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

节点的获取

⭐️ Node.nodeName

• 返回值是大写
• 只读属性，不可修改

<div class="container">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <!-- 我是注释 -->
  <p>123</p>
</div>
<script>
  const oContainer = document.getElementsByClassName('container')[0];
  console.log(
    oContainer.nodeName, // DIV
    oContainer.firstChild.nodeName, // #text (第一个是文本节点)
    oContainer.childNodes[3].nodeName, // #comment（第四个是注释节点）
    oContainer.lastElementChild.nodeName // P（最后一个元素节点是p标签）
  );
</script>

Node.nodeValue

• 有 nodeValue 的节点
  • 属性节点（2）
  • 文本节点（3）
  • 注释节点（8）
• 没有 nodeValue 的节点
  • 元素节点（1）
• nodeValue 可以被修改

<div class="container" id="app">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </div>
  <!-- 我是注释 -->
  <p>123</p>
</ul>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点

  const oBlankText = oContainer.firstChild; // 文本节点
  const oComment = oContainer.childNodes[3]; // 注释节点
  const oContainerIdAttr =
        oContainer.getAttributeNode('id'); // container的id属性节点
  const oUlClassAttr =
        document.getElementsByTagName('ul')[0].getAttributeNode('class');
  			// ul标签的class属性节点

  console.log(
    oContainer.nodeValue, // null
    oBlankText.nodeValue, // '\\n  '
    oComment.nodeValue, // ' 我是注释 '
    oContainerIdAttr.nodeValue, // 'app'
    oUlClassAttr.nodeValue // 'list'
  )

  oComment.nodeValue = '我是被修改后的注释';
  console.log(oComment.nodeValue); // comment 被修改成 我是被修改后的注释
</script>

⭐️ Node.nodeType

• 类型
  • 元素节点（1）
  • 属性节点（2）
  • 文本节点（3）
  • 注释节点（8）
  • document（9）
  • DocumentFragment（11）
• 只读

Node.hasChildNodes

• 返回一个布尔值,表明当前节点是否包含有子节点.

<div class="container" id="app" style="background-color: aqua;font-size: 18px;">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <!-- 我是注释 -->
  <p>123</p>
</div>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点
  console.log(oContainer.hasChildNodes()); // true
</script>

Element.attributes

• 返回该元素所有属性节点的一个实时集合

<div class="container" id="app" style="background-color: aqua;"></div>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点
  console.log(oContainer.attributes);
</script>

⭐️ Element.getAttribute

• 返回元素上的一个指定的属性值

<div class="container" id="app" style="background-color: aqua;font-size: 18px;">
</div>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点
  console.log(
    oContainer.getAttribute('style') // background-color: aqua;font-size: 18px;
  );
</script>

Element.getAttributeNode

• 返回指定元素的指定属性节点

<div class="container" id="app" style="background-color: aqua;font-size: 18px;">
</div>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点
  console.log(oContainer.getAttributeNode('style'));
</script>

封装获取节点子元素

普通封装

function elemChildren(node) {
	var arr = [],
      children = node.childNodes;

  for (var i = 0; i < children.length; i++) {
    var childItem = children[i];
  	if (childItem.nodeType === 1) {
      arr.push(childItem);
    }
  }

  return arr;
}

console.log(elemChildren(div));

类数组形式

function elemChildren(node) {
	var hash = {
  			'length': 0,
    		'push': Array.prototype.push,
    		'splice': Array.prototype.splice,
  		},
      children = node.childNodes;

  for (var i = 0; i < children.length; i++) {
    var childItem = children[i];
    if (childItem.nodeType === 1) {
    	// hash[hash['length']] = childItem;
    	// hash['length']++;
      // 使用 push 的时候会 length 会自动 ++
      hash.push(childItem);
    }
  }

  return hash;
}

console.log(elemChildren(div));

节点的增删改

⭐️ createElement

• 创建元素
• document.createElement
• 出自 Document.prototype

var div = document.createElement('div');
div.innerHTML = '123';
document.body.appendChild(div);

⭐️ createTextNode

• 创建文本节点

var test = document.createTextNode('321');
document.body.appendChild(test);

createComment

• 创建注释节点

var comment = document.createComment('我是注释');
document.body.appendChild(comment);

⭐️ appendChild

• 增加子节点
• Node.prototype（DOM 结构树的最顶层，因为Element需要用，Document 和旗下的 XMLHTML 也需要用，所以干脆挂在最顶层 Node.prototype 上）
• 在目标元素内的尾部追加（类似数组的push）

var div = document.getElementsByTagName('div')[0];

var p = document.createElement('p');
p.innerHTML = '我是p';

var text = document.createTextNode('我是text文本');

var comment = document.createComment('我是注释');

div.appendChild(p);
div.appendChild(text);
div.appendChild(comment);

• 剪切节点，把目标元素从原位置“挪”过来

<a href="">我是超链接</a>

<script>
  var a = document.getElementsByTagName('a')[0];
  var div = document.createElement('div');
  div.innerHTML = '<p>我是段落标签</p>'
  document.body.appendChild(div);
  div.appendChild(a); // 会把dom中原来的a标签剪切到div内部去
</script>

⭐️ insertBefore(newNode, referenceNode)

• 插入：把 newNode 节点插入到 父节点 下的 referenceNode 之前

<div>
  <p>我是p标签</p>
</div>

<script>
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];

  var a = document.createElement('a');
  a.innerHTML = '我是a标签';

  div.insertBefore(a, p);
</script>

⭐️ removeChild(子节点)

• 返回被删除的子节点
• 存在 Node.prototype
• 被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的 DOM 树中，因此，你还可以把这个节点重新添加回文档中

<div>
  <p>我是p标签</p>
</div>

<script>
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];

  div.removeChild(p);
</script>

DOM 对象 = 元素节点

节点：
元素节点、文本节点、属性节点、注释节点、document、DocumentFragment

DOM对象
var div = document.getElementsByTagName('div')[0];

-> 元素 -> 元素节点
nodeName nodeValue nodeType attributes hasChildNodes

元素 		-> 		构造函数实例化			 -> 		div节点
div				new HTMLDivElement()			removeChild(div)
						-> div DOM对象						删除了节点，但DOM对象还存在内存
            		存储在内存中

⭐️ remove

• 元素销毁，删除自身和自身所有子节点

<p>我是p元素</p>

<script>
  var p = document.getElementsByTagName('p')[0];
  p.remove();
  document.body.appendChild(p);
</script>

⭐️ innerHTML/innerText

• HTMLElement.prototype
• innerHTML 还存在于 Element.prototype

div.innerHTML = 123;
// 追加
div.innerHTML += '111'
div.innerHTML = '<div>hhh</div>'

innerText

• 获取的是文本内容
• 老版本 Firefox 不支持，需要调用 textContent
• 然而老版本 IE 不支持 textContent

<div></div>

<script>
  var div = document.getElementsByTagName('div')[0];
  div.innerText = '<a href="" style="color: red">我是a标签</a>'
</script>

⭐️ replaceChild(newChild, oldChild)

• 节点替换
• 把 父节点 下边的 oldChild 节点 替换为 newChild 节点

<div>
  <p>我是p节点</p>
</div>

<script>
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  var h1 = document.createElement('h1');
  h1.innerText = '我是h1标签';
  div.replaceChild(h1, p);
</script>

⭐️ setAttribute、getAttribute

• 设置、获取属性

<div class="container wrap" id="list">123</div>

<script>
  var div = document.getElementsByTagName('div')[0];
  console.log(div.getAttribute('class')); // "container wrap"
  div.setAttribute('class', 'contain');
  console.log(div.getAttribute('class')); // "contain"
</script>

⭐️ data-*

• 设置自定义属性
• HTML5内容
• IE9以下没有

dataset

• 管理自定义属性

<p data-age='123' data-sex='男' data-name='张三'>p标签</p>

<script>
  var p = document.getElementsByTagName('p')[0];
	console.log(p.dataset);
  console.log(p.dataset.age);
  console.log(p.dataset.name);
</script>

获取属性

p.getAttribute('data-age')
p.getAttribute('data-name')

设置属性