DOM

第十单元DOM

   当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。DOM是“Document Object Model”（文档对象模型）的首字母缩写。

10-1 DOM的概念

10-1.1 DOM树

HTML文档中的所有节点组成了一个文档树模型，文档中的每个元素、属性、文本等都代表着树中的一个节点，再由这些节点组成一个树状结构（DOM Tree）。

10-1.2 节点关系

节点树中的节点彼此拥有层级关系。



我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同	胞（兄弟或姐妹）。

HTML文档中的每一个成分都是一个节点

	整个文档是一个文档节点
	每个HTML标签是一个元素节点
	包含在HTML元素中的文本是文本节点
	每一个HTML属性是一个属性节点
	注释属于注释节点

10-2 节点属性

单词: node ,节点是分为多种类型的

节点种类：              元素节点、  属性节点、 文本节点 、   注释节点 、  文档节点

nodeType：                 1        2          3            8           9     //  返回元素的	节点类型

nodeName 分别是 : Element ,         Attr,          #text  ,      #comment、 #document            //  返回元素名

nodeValue 分别是：   null ,           属性值,           文本，        注释文本，     null                   //  返回元素的节点值

节点的几个属性:      nodeName、nodeType 和 nodeValue。



document.getElementById("demo").tagName; // P

10-3 文档的写入

10-3.1 document.write() 

10-3.2 document.writeln()  等同于 write() 方法，不同的是在每个表达式之后写一个换行符

10-4 查找元素

通过id属性值获取：document.getElementById()                           // 返回拥有指定ID的第一个对象的引用

通过标签名称获取：document.getElementsByTagName()          // 返回带有指定标签名的对象的集合-数组

通过class属性值获取：document.getElementsByClassName()  // 返回带有指定class名称的对象的集合-数组

通过name属性值获取：document.getElementsByName()           // 返回带有指定name名称的对象的集合-数组

10-5 元素属性

	元素.innerHTML                               // 属性设置或返回表格行的开始和结束标签之间的 HTML

	元素.innerText                                  // 从起始位置到终止位置的内容

	元素.getAttribute('id')                    // 获取属性

	元素.setAttribute('class','box')     // 设置属性



	outerHTML:
		除了包含innerHTML的全部内容外, 还包含对象标签本身。

11-1 节点遍历

11-1.1 节点树

document.firstChild;                 属性返回指定节点的首个子节点

document.lastChild;                  属性返回指定节点的最后一个子节点

document.childNodes;             属性返回指定节点的子节点集合 - 数组

document.parentNode;           属性返回指定节点的父节点

document.nextSibling;             属性返回指定节点之后紧跟的节点，在相同的树层级中

document.previousSibling;     属性返回同一树层级中指定节点的前一个节点

11-1.2 元素树

document.firstElementChild                   属性返回指定元素的第一个子元素

document.lastElementChild                    属性返回指定元素的最后一个子元素

document.children                                    属性返回指定元素的子元素的集合-数组

document.parentElement                        属性返回指定元素的父元素

document.nextElementSibling                属性返回指定元素之后的下一个兄弟元素

document.previousElementSibling        属性返回指定元素的前一个兄弟元素

document.childElementCount                属性返回指定元素的子元素的个数

11-2 节点操作方法

appendChild()           方法可向节点的子节点列表的末尾添加新的子节点

    父节点.appendChild(新的子节点);

insertBefore()            方法可在已有的子节点前插入一个新的子节点

父节点.insertBefore(新的子节点,已有的子节点);     // existing现有的

replaceChild() 方法可将某个子节点替换为另一个

父节点.replaceChild(新节点,要替换的节点);

removeChild()            方法指定元素的某个指定的子节点。

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
父节点.removeChild(要删除的子节点)

cloneNode()               方法创建节点的拷贝，并返回该副本。方法克隆所有属性以及它们的值。如果您需要克隆所有后代，				请把 deep 参数设置 true，否则设置为 false。

  var cln=itm.cloneNode(true); // 拷贝节点
	document.getElementById("myList1").appendChild(cln);

11-3 创建元素与删除元素

document.createElement()                                            // 创建元素节点

document.createTextNode()                                         // 创建文本节点

document.appendChild(node)                                      // 向子节点的末尾添加新的节点

document.insertBefore(newNode, existNode)        // 现有的子元素之前插入一个新的子元素

document.removeChild(node)                                      // 删除一个子元素

document.remove()                                                         // 删除目标元素