什么是DOM
- document object model 文档对象模型
- dom里面提供了一系列的方法
DOM定义了表示和修改文档所需的方法,DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合,也有人称DOM是对接HTML和XML的标准编程接口
- getElementsByTagName(‘参数’)[参数] 通过标签名选择节点 第一个参数为标签名 传递的为一个类数组 第二个参数为数组的哪一位
- .style 为选中的样式列表
- doucment.createElement(‘div’) 新建一个div
- document.body.appendChild(div); 将新增的div插入到body标签里面
DOM操作
查看元素
- doucment代表整个文档
- getElementByid(’’) ID
- getElementsByTagName(‘’) 标签名 类数组 但没有数组的某些方法
- getElementsByClassName(’’) 类名 ie8及以下不好使
- getElementsByName(’’) 只有部分标签name生效
- querySelector(‘div >span strong.demo’) CSS选择器一样
- querySelectorAll(’’) 选出来一组
但是querySelector选出来的不是实时的!所以不用
遍历节点树
- parentNode -> 父节点 最顶端的parentNode为#document
strong.parentNode 找到strong的父节点
- childNodes 子节点们
- firstChild 第一个子节点
- lastChild 最后一个子节点
- mextSibling 后一个兄弟节点
- previousSibling 前一个兄弟节点
遍历元素节点树
- parentElement 返回当前元素的父元素节点
- children 只返回当前元素的元素子节点 *
- children.length 返回元素子节点的个数
- firstElementChild 返回的第一个元素节点
- lastElemnentChild 返回的最后一个元素节点
- nextElementsSibling 后一个兄弟元素节点
- 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节点的属性
- .innerHTML 取出HTML内容 可以写入HTML结构
- .innerText 取出文本内容 赋值会把原来的结构覆盖掉
Element节点上的方法
- .setAttribute(‘class’,‘only’) 给元素添加属性及属性值
- .getAttribute(‘class’) 获取的class属性值
节点的四个属性
节点的类型
元素节点 --1
属性节点 --2
文本节点 --3
注释节点 --8
document --9
DocumentFragment --11
- nodeName 元素的标签名 以大写字母表示,只读
- nodeValue 文本节点text和注释节点comment 有这个属性
- nodeType 返回节点类型值
- attribustes 返回属性节点的集合
- 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); //将新建的节点替换为 父节点的某个子结点