DOM初识

什么是DOM

1. document object model 文档对象模型
2. dom里面提供了一系列的方法

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

4. getElementsByTagName(‘参数’)[参数] 通过标签名选择节点 第一个参数为标签名 传递的为一个类数组 第二个参数为数组的哪一位
5. .style 为选中的样式列表
6. doucment.createElement(‘div’) 新建一个div
7. document.body.appendChild(div); 将新增的div插入到body标签里面

DOM操作

查看元素

1. doucment代表整个文档
2. getElementByid(’’) ID
3. getElementsByTagName(‘’) 标签名 类数组 但没有数组的某些方法
4. getElementsByClassName(’’) 类名 ie8及以下不好使
5. getElementsByName(’’) 只有部分标签name生效
6. querySelector(‘div >span strong.demo’) CSS选择器一样
7. querySelectorAll(’’) 选出来一组

但是querySelector选出来的不是实时的！所以不用

遍历节点树

1. parentNode -> 父节点 最顶端的parentNode为#document

strong.parentNode 找到strong的父节点

2. childNodes 子节点们
3. firstChild 第一个子节点
4. lastChild 最后一个子节点
5. mextSibling 后一个兄弟节点
6. previousSibling 前一个兄弟节点

遍历元素节点树

1. parentElement 返回当前元素的父元素节点
2. children 只返回当前元素的元素子节点 *
3. children.length 返回元素子节点的个数
4. firstElementChild 返回的第一个元素节点
5. lastElemnentChild 返回的最后一个元素节点
6. nextElementsSibling 后一个兄弟元素节点
7. previousElementSibling 前一个兄弟元素节点

DOM结构树

document --> HTMLDocument.prototype --> Document.prototype

DOM基本操作

getElementById方法定义在Document.prototype上，即Element节点上不能使用
getElementsByName 方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml,document.Element）
getElementsByTagName方法定义在Document.prototype和Element.prototype上
HTMLDocument.prototypeS定义了一些常用的属性 body,head，分别指代HTML文档中的标签
Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中《他总是指代html元素
getElementsByClassName.querySelectorAll,querySelector在Document.prototype,Element.prototype类中均有定义

Element节点的属性

1. .innerHTML 取出HTML内容 可以写入HTML结构
2. .innerText 取出文本内容 赋值会把原来的结构覆盖掉

Element节点上的方法

1. .setAttribute(‘class’,‘only’) 给元素添加属性及属性值
2. .getAttribute(‘class’) 获取的class属性值

节点的四个属性

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

1. nodeName 元素的标签名 以大写字母表示，只读
2. nodeValue 文本节点text和注释节点comment 有这个属性
3. nodeType 返回节点类型值
4. attribustes 返回属性节点的集合
5. Node.hasChildNodes() true false 判断有没有子节点

// 添加节点
// 方法一
let newnode = document.createElement('div'); //创建一个p 标签节点
let nodevalue = document.createTextNode("this is new text"); // 创建一个 文本节点
newnode.appendChild(nodevalue); //将这个文本节点追加到某个节点
let element = document.getElementById("div1"); //获取文本 中的某个节点
element.appendChild(newnode);  //将新建的元素节点 添加到某节点
//appendChild() 方法，追加新元素作为父的最后一个子。


// 方法二
var para = document.createElement("p");//创建一个p 标签节点
var node = document.createTextNode("这是新文本。");// 创建一个 文本节点
para.appendChild(node);
var element = document.getElementById("div1"); //获取文本 中的某个节点
var child = document.getElementById("p1"); //获取文本 中的某个节点
element.insertBefore(para, child);  ///将新建的元素节点 添加到某节点的某个子结点之前

// 删除节点
var parent = document.getElementById("div1"); // 获取文本 中的某个节点
var child = document.getElementById("p1"); // 获取文本 中的某个节点中你要删除的节点
parent.removeChild(child); // 删除paret节点（div1）中的child节点(p1)

parent.removeChild()   删除对应的子节点  返回子节点
child.remove()   删除自己没有返回值

var child = document.getElementById("p1");   //
child.parentNode.removeChild(child); //或者使用parent.Node方法找到元素的父节点，然后删除这个父节点的某个子节点

//替换节点
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1"); //获取父节点
var child = document.getElementById("p1"); //获取父节点中的某个子节点
parent.replaceChild(para, child);  //将新建的节点替换为 父节点的某个子结点

原文地址：https://www.qianqianhaiou.cn/index.php/archives/62/