DOM基础语法

1.识别节点的类型与名称：

每个节点都有nodeType（节点类型）与nodeName（节点名）属性

<a href="#">hi</a>
console.log(document.querySelector('a').nodeName,
　　　　　　document.querySelector('a').nodeType);

//A 
// 1  ELEMENT_NODE   nodeType为1；

<a href="#">hi</a>
console.log(document.querySelector('a').firstChild.nodeName,
　　　　　　document.querySelector('a').firstChild.nodeType);

//A 
// 3  TEXT_NODE   nodeType为3；

所以判断一个元素是否为element节点

console.log(document.querySelector('a').nodeType === 1);
// true

或者使用Node.ELEMENT_NODE 来检查：

console.log(document.querySelector('a').nodeType === Node.ELEMENT_NODE);
// true

 2.获取节点的值

console.log(document.querySelector('a').nodeValue);
console.log(document.querySelector('a').firstChild.nodeValue);

// null;
// hi

绝大多数的节点类型（除了Text和Comment)的nodeValue属性都返回null。它的作用就是返回Text和Comment 节点实际文本的字符串。

3.用js方法创建元素与文本节点

* createElement();

* createTextNode();

var elementNode = document.createElement('div');
var TextNode = document.createTextNode('hi');
console.log(elementNode.nodeType);
console.log(TextNode.nodeType);

// 1
// 3

 4. 使用javascript字符串创建并向dom中添加元素与文本节点：

1) .innerHTML:  创建元素与文本节点并添加到dom:

<a  id="a">hi</a>

document.getElementById('a').innerHTML = 'ho';
// "ho"

<a  id="a">ho</a>

<a  id="a">ho</a>

document.getElementById('a').innerHTML = '<strong>hi</strong>';

//  "<strong>hi</strong>"

<a  id="a"><strong>hi</strong></a>

2)outerHTML：创建元素与文本节点来替换dom:

document.getElementById('a').outerHTML = '<strong>hi</strong>';
//  "<strong>hi</strong>"

html:
<strong>hi</strong>

3)textContent :创建一个文本节点并用它来更新：

document.getElementById('a').textContent = 'hi';
//  "hi"

html:
<a id="a">hi</a>

4)innerHTML: 创建一个文本节点并用它来更新：

5)outerText: 创建一个文本节点并用它来替换dom元素：

document.getElementById('a').outerText = 'hi';

html:

before:
<a id="a">hi</a>

after:
" hi "

 6)使用appendChild()与insertBefore()向dom中插入节点对象

insertBefore()方法需要两个参数：要插入的节点，和文档中你想要在哪个节点之前插入的该节点引用。

7)使用removeChild()与replaceChild()来移除与替换节点。

从dom中移除一个节点，首先要选取要你要移除的节点，然后获取它的父元素，通常使用parentNode属性，然后在父节点上调用removeChild()方法。

<script>
// 移除文本节点
var div1 =document.getElementById('a');
div1.parentNode.removeChild(div1);

var div2 = document.getElementById('b').firstChild;
// div2.parentNode.removeChild(div2);
console.log(div2);
console.log(document.body.innerHTML);
</script>

<script>
// 替换元素节点
var div1 = document.getElementById('a');
var newSpan = document.createElement('span');
newSpan.textContent = 'hellow';
div1.parentNode.replaceChild(newSpan,div1);

console.log(document.body.innerHTML);
</script>

<script>
// 替换文本节点
var div1 = document.getElementById('a').firstChild;
var div2 =document.getElementById('b');
var newText = document.createTextNode('xixi');
div1.parentNode.replaceChild(newText,div1);
console.log(document.body.innerHTML);
console.log(div1.nodeType);
console.log(div2.nodeType);
</script>

8）创建元素：

createElement(); 

createElement('textarea');

9）获取元素标签名：

.tagName();

.nodeName();

两者返回的值都是大写；

10）获取元素属性值：

var atts = document.querySelector('a').attributes; 返回的是数组

获取，设置及移除元素的属性值：

getAttribute('href'),setAttribute('href','#');removeAttribute('href');

验证元素是否有一特定属性：

hasAttribute('href'); 返回值类型为布尔；

获取类属性值列表：

classList;

添加class : p.classList.add('size');

移除class:  p.classList.remove('size');

变换某个类属性值：

使用classList.toggle()方法，可以使我们在某个值缺失时添加，或者在它已经被添加时移除。

判断类属性值是否含有某一特定值：

p.classList.contains('size');

11)选取特定元素节点：

querySelector();

getElementById();

12)选取／创建一个元素节点列表：

querySelectorAll();

getElementsByTagName();

getElementsByClassName();

记住childNodes也会返回一个NodeList，就像querySelectorAll(),getElementsByTagName()及getElementsByClassName()

<ul id="c"><!-- comment -->
    <li class="liclass">fdsa1</li>
    <li class="liclass">fdsa2</li>
    <li class="liclass">fdsa3</li>
</ul>

var ul = document.querySelector('ul').childNodes;
console.log(ul);
console.log(ul[0]);

[comment, text, li.liclass, text, li.liclass, text, li.liclass, text]

<li class="liclass">fdsa1</li>

比较：querySelectorAll(),getElementsByTagName()及getElementsByClassName()

    var ul2 = document.querySelectorAll('li');
    var ul3 = document.getElementsByTagName('li');
    var ul4 = document.getElementsByClassName('liclass');

        console.log(ul4);
    console.log(ul3);
    console.log(ul2);


output：[li.liclass, li.liclass, li.liclass]

 13)选取所有的直属子元素节点：

document.querySelector('ul').children;

注意使用children只会给我们返回直属元素的元素节点，剔除了任何不是元素的节点（如文本节点），如果元素没有子节点，children将返回一个空的类数组列表。

<ul id="c"><!-- comment -->
    <li class="liclass">fdsa1</li>
    <li class="liclass">fdsa2</li>
    <li class="liclass">fdsa3</li>
</ul>

<script>
    var ulElement = document.querySelector('ul');
    var ul2 = document.querySelector('ul').children;
    console.log(ulElement.childNodes);
    console.log(ul2);
</script>


output：
[comment, text, li.liclass, text, li.liclass, text, li.liclass, text]
[li.liclass, li.liclass, li.liclass]

14）removeChild 方法：
1.移除某个节点所有的子节点：

var div = document.getElementById('box');
while (box.firstChild) {
    div.removeChild(div.firstChild);
}

2.移除一个特殊的节点，不知道它的父节点：

var node = document.getElementById("fs-p");
　　if (node.parentNode) {
      　　node.parentNode.removeChild(node);
 　　}

3.移除一个特殊节点，知道它的父节点：

var node = document.getElementById("fs-p");
var div = document.getElementById('box');
div.removeChild(node);