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