12、DOM模型之节点操作

概要

1. 获取节点
2. 节点操作

   DOM只是一个接口规范，可以用各种语言实现。所以严格的说，DOM不是JS语法的一部分，但是DOM操作是JS最常见的任务，离开了DOM，JS就无法控制网页。

   DOM的最小组成单位叫做节点（node），大家目前可以把节点理解为页面的元素，包含标签和文本内容等

1、获取节点

a、document.getElementsByTagName()

搜素HTML标签名，返回符合条件的元素集合。

var paras = document.getElementsByTagName('p');

b、document.getElementByClassName()

返回包括了所有class名字符合指定条件的元素集合。

var elements = document.getElementsByClassName(names);

c、document.getElementById()

返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。

var elem = document.getElementById('para1');

d、document.querySelector()、document.querySelectorAll()

querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
querySelectorAll方法返回指点元素节点的子树中匹配selector的节点集合。

var el1 = document.querySelector('.myclass');
var els = document.querySelectorAll('.myclass');

2、节点操作

a、document.createElement()

createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

b、document.createTextNode()

createTextNode方法用来生成文本节点（text实例），并返回该节点。它的参数是文本节点的内容。

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent)

c、node.appendChild()

appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点里。该方法的返回值就是插入文档的子节点。

var p = document.createElement('p');
document.body.appendChild(p);

d、element.innerHtml

element.innerHtml属性返回一个字符串，等同于该元素包含的所有html代码。该属性可读写，常用来设置某个节点内容。

title.innerHTML = "<a href='https://www.baidu.com'>百度</a>";

e、element.innerText

innerText与innerHtml类似，但是如果写入的内容是标签则识别为字符串。

title.innerText = "<a href='https://www.baidu.com'>百度</a>";