dom选择器，节点类型

DOM

什么是DOM

1. DOM --> Document Object Model
2. DOM定义了表示和修改文档所需要的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML及XML的标准编程接口。

从DOM、BOM开始，系统生成的成组的方式基本都是类数组。

DOM基本操作

对节点的增删改查

查

(1) document代表整个文档
(2) document.getElementsById() //定义在Document.prototype上
(3) .getElementsByTagName() //标签名 //定义在Document.prototype和Element.prototype上
(4) .getElementsByName() //需注意，只有部分标签名可生效(表单，表单元素，img，iframe) //定义在HTMLDocument.prototype上
(5) .getElementsByClassName() //类名
(6) document.querySelector() //css选择器 //关键字触发页面
(7) .querySelectorAll() //css选择器

(5、6、7)在Document.prototype和Element.prototype上均有定义

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

var div = document.querySelector('div>span>strong.demo');

遍历节点数

1. 遍历节点数
   (1) parentNode -> 父节点(最顶端的parentNode为#document)；
   (2) childNodes -> 子节点
   (3) firstChild -> 第一个子节点；lastChild -> 最后一个子节点
   (4) nextSibling -> 后一个兄弟节点； previousSibling -> 前一个兄弟节点

2. 基于元素节点数的遍历
   (1) parentElement -> 返回当前元素的父元素节点
   (2) children -> 只返回当前元素的子元素节点
   (3) node.childElementCount === node.children.length -> 当前元素节点的子元素
   (4) firstElementChild -> 返回的是第一个元素节点； lastElementChild -> 返回的是最后一个元素节点；
   (5) nextElmentSibling -> 返回后一个兄弟元素节点； previousElementSibling -> 返回前一个兄弟元素节点

3. 节点类型

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

4. 节点的四个属性
   (1) nodeName - 元素的标签名，以大写形式表示，只读
   (2) nodeValue - Text节点或Comment节点的文本内容，可读写
   (3) nodeType - 该节点的类型，只读
   (4) attributes - Element节点的属性集合

5. 节点的一个方法 - Node.hasChildNodes()

<div>【//文本
    123】
    【<!-- This is comment -->】//注释【
    】【<strong></strong>】【
    】【<span></span>】【
】</div>//7个节点--【】

// div.childNodes
// NodeList(7) [text, comment, text, strong, text, span, text]

// div.firstChild
// " 123 "

// div.lastChild
// #text

// span.nextSibling
// #text
// span.previousSibling.previousSibling
// <strong>​</strong>​

// span.parentElement
// <div>​" 123 "<!-- This is comment --><strong>​</strong>​<span>​</span>​</div>​

// div.children
// HTMLCollection(2) [strong, span]

// span.childElementCount
// 0
// div.children.length
// 2

// div.firstElementChild
// <strong>​</strong>​
// div.lastElementChild
// <span>​</span>​

// span.previousElementSibling
// <strong>​</strong>​
// span.previousElementSibling.nextElementSibling
// <span>​</span>​

// div.childNodes[4].nodeValue = 234
// 234
// span.previousSibling.nodeValue
// '234'
// span.nodeValue
// null

// div.attributes[0].value = 'abc'
// 'abc'
// div
// <div id=​"abc" class=​"bb">​…​</div>​

增

(1) document.createElement(‘’); -> 增加元素节点
(2) document.createTextNode(); -> 增加文本节点
(3) document.createComment(); -> 增加注释节点
(4) document.createDocumentFragment(); ->

document.body.appendChild();//将()加到body里面

插

(1) ParentNode.appendChild(); ≈ .push() 但是把已有的重新插入到另一个地方的操作类似于剪贴
(2) ParentNode.insertBefore(a, b); -> insert a before b

删

(1) parent.removeChild(); -> 删除子节点 (实质是剪切出来)
(2) child.remove(); -> 删除自身 (销毁)

替换

parent.replaceChild(new, origin); (注意书写顺序，实质是剪切出来)

Element节点的一些属性

• innerHTML -> 只要往里写的是HTML就可以被识别并取用
• innerText -> 覆盖

Element节点的一些方法

• ele.setAttribute();

div.setAttritube('class', 'demo'); //前面是属性名，后面是属性值

• ele.getAttribute(); -> 获取属性值

div.getAttritube('class');

var div = document.createElement('div');
var span = document.createElement('span');
var text = document.createTextNode('11');
var text1 = document.createTextNode('22');
div.innerHTML = 1;
div.appendChild(text);
div.setAttribute('class', 'bb');
div.insertBefore(span, text);
span.appendChild(text1);
span.setAttribute('id', 'aa');
//<div class=​"bb">​"1"<span id=​"aa">​22​</span>​"11"</div>​
//在控制台document.body.appendChild(div)才能将已经创建的div呈现到HTML上