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').deName,
document.querySelector('a').deType);
/
/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').deValue);
/
/ null;
// hi
绝⼤多数的节点类型（除了Text和Comment)的nodeValue属性都返回null。它的作⽤就是返回Text和Comment 节点实际⽂本的字符串。
3.⽤js⽅法创建元素与⽂本节点
* createElement();
* createTextNode();
var elementNode = ateElement('div');
var TextNode = ateTextNode('hi');
console.deType);
console.deType);
// 1
// 3
4. 使⽤javascript字符串创建并向dom中添加元素与⽂本节点：
1) .innerHTML: 创建元素与⽂本节点并添加到dom:
<a id="a">hi</a>
// "ho"
<a id="a">ho</a>
<a id="a">ho</a>
// "<strong>hi</strong>"
<a id="a"><strong>hi</strong></a>
2)outerHTML：创建元素与⽂本节点来替换dom:
// "<strong>hi</strong>"
html:
<strong>hi</strong>
3)textContent ：创建⼀个⽂本节点并⽤它来更新：
// "hi"
html:
<a id="a">hi</a>
4)innerHTML: 创建⼀个⽂本节点并⽤它来更新：
5)outerText: 创建⼀个⽂本节点并⽤它来替换dom元素：
html:
before:
<a id="a">hi</a>
after:
" hi "
6)使⽤appendChild()与insertBefore()向dom中插⼊节点对象
insertBefore()⽅法需要两个参数：要插⼊的节点，和⽂档中你想要在哪个节点之前插⼊的该节点引⽤。
7)使⽤removeChild()与replaceChild()来移除与替换节点。
从dom中移除⼀个节点，⾸先要选取要你要移除的节点，然后获取它的⽗元素，通常使⽤parentNode属性，然后在⽗节点上调⽤removeChild()⽅法。
<script>
// 移除⽂本节点
var div1 =ElementById('a');
veChild(div1);
var div2 = ElementById('b').firstChild;
// veChild(div2);
console.log(div2);
console.log(document.body.innerHTML);
</script>
<script>
// 替换元素节点
var div1 = ElementById('a');
var newSpan = ateElement('span');
placeChild(newSpan,div1);
console.log(document.body.innerHTML);
</script>
<script>
// 替换⽂本节点
var div1 = ElementById('a').firstChild;
var div2 =ElementById('b');
var newText = ateTextNode('xixi');
placeChild(newText,div1);
console.log(document.body.innerHTML);
console.deType);
console.deType);
</script>
8）创建元素：
createElement();
createElement('textarea');
9）获取元素标签名：
.tagName();
.nodeName();
queryselectorall用法两者返回的值都是⼤写；
10）获取元素属性值：
var atts = document.querySelector('a').attributes; 返回的是数组
获取，设置及移除元素的属性值：
getAttribute('href'),setAttribute('href','#');removeAttribute('href');
验证元素是否有⼀特定属性：
hasAttribute('href'); 返回值类型为布尔；
获取类属性值列表：
classList;
添加class : p.classList.add('size');
移除class: ve('size');
变换某个类属性值：
使⽤le()⽅法，可以使我们在某个值缺失时添加，或者在它已经被添加时移除。
判断类属性值是否含有某⼀特定值：
ains('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 = ElementsByTagName('li');
var ul4 = ElementsByClassName('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 = ElementById('box');
while (box.firstChild) {
}
2.移除⼀个特殊的节点，不知道它的⽗节点：
var node = ElementById("fs-p");
if (node.parentNode) {
veChild(node);
}
3.移除⼀个特殊节点，知道它的⽗节点：
var node = ElementById("fs-p");
var div = ElementById('box');
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论