js-DOM

Posted 2021-01-22 陈皮

js-DOM

DOM定义

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

DOM基本操作

节点的类型

节点名称	节点类型
元素节点	1
属性节点	2
文本节点	3
注释节点	8
document	9
DocumentFragment	11

• 获取节点类型 -- nodeType

DOM节点树

遍历节点树

• parentNod --> 父节点（最顶端的parentNode为#document)
• childNodes --> 子节点们
• firstChild --> 第一个子节点
• lastChild --> 最后一个节点
• nextSibling --> 后一个兄弟节点；previousSibling --> 前一个兄弟节点

基本元素节点树的遍历

• parentElement --> 返回当前元素的父元素节点（IE不兼容）
• children --> 只返回当前元素的元素子节点
• node.childrenElementCount === node.children.length 当前元素节点的子节点的数量
• firstElementChild --> 返回第一个元素节点
• lastElementChild --> 返回的值最后一个元素节点
• nextElementSibling/previousElementSibling --> 返回后一个/前一个兄弟元素

节点的四个属性

• nodeName -- 元素的标签名，以大写形式表示，只读
• nodeValue -- Text节点或comment节点的文本内容，可读写
• nodeType -- 节点的类型，只读
• Attributes -- element节点的属性结合
  节点的一个方法：Node.hasChildNodes();

DOM节点的增删改查

查

查找元素节点

• document代表整个文档
• document.getElementById(‘id1); //元素id在ie8以下的浏览器不区分大小写，而且也返回匹配name属性的元素。
• document.getElementsByTagName(‘div‘); //标签名
• document.getElementByName(‘name1‘);//PS:只有部分标签name可生效（表单，表单元素，img, iframe）
• document.getElementClassName(‘classname1‘); //类名，ie8及以下的版本没有class，可以多个类名一起。
• document.querySelector(); //css选择器，在ie7及以下版本没有.选出来的是一个
• document.querySelectorAll(); //css选择器，在ie7及以下版本没有。选出来的是一组

PS:不常用querySelector,querySelectorAll,因为它们选出来的对象不是实时的。

1. getElementById方法定义在document.prototype上，即element节点上不能使用。
2. getElementsByName方法定义在HTMLDocument.prototype上，即非html的document上不能使用（xml document, element)
3. getElementsByTagName方法定义在了document.prototype和Element.prototype上。
4. HTMLDocument.prototype上定义了一些常用的属性，body,head分别指代HTML文档中的< body> < head>标签。
5. HTMLDocument.prototype上定义了documentElement的属性，指代文档根元素，在HTML文档中，它总是指代< html>元素.
6. getElemnetsByClassName, querySelector, querySelectorAll在Document.prototype, Element.prototype类中均有定义。

增

• document.createElement();//创建元素节点
• document.createTextNode();//创建文本节点
• document.createComment();//创建注释节点
• document.createDocumentFragment();

插入

• PARENTNODE.appendChild(a);// 类比.push()
• PARENTNODE.insertBefore(a,b);//在PARENTNODE里面的b节点前面插入子节点a。

删

• parent.removeChild();
• child.remove();

替换

• parent.replaceChild(new,old);

Element的一些节点属性

• innerHTML;
• innerText(firefox不兼容)/textContent（老版本IE不好使）

Element的一些方法

• .getAttribute();
• .setAttribute();