DOM

DOM：（document object mode）文档对象模型。DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。

目的就是为了能让js操作html元素而制定的一个规范

DOM是由节点组成的：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树

操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

上图可知，在HTML当中，一切都是节点：（非常重要）

元素节点：HTML标签。
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

object节点维护的内容

dom操作的内容

节点查找

直接查找

根据ID查找

永远只会找到一个标签

// obj  = document.getElementById('元素的id') 永远只会找到一个标签
var dar = document.getElementById('d1');
console.log(dar)

根据类名查找

永远得到一个数组

var objs = document.getElementsByClassName('foo');
console.log(objs[0]);
console.log(objs[1]);

根据标签查找

永远得到一个数组

var objs = document.getElementsByTagName('div');
console.log(objs[0])
console.log(objs[1])
console.log(objs[2])

间接查找

节点之间的关系是以属性的方式存在的

找父亲

var p_obj = document.getElementsByClassName('foo')[0]
console.log(p_obj.parentElement);

找儿子

var objs = document.getElementById('d1');
console.log(objs.children);  // objs的子标签
console.log(objs.firstElementChild);  // objs的第一个子标签
console.log(objs.lastElementChild);  // objs的最后一个子标签

找哥哥

var p_obj = document.getElementsByClassName('foo')[0];
dac = p_obj.nextElementSibling   // p_obj的下一个同级元素
console.log(dac.previousElementSibling); // dac的上一个同级元素

找弟弟

var p_obj = document.getElementsByClassName('foo')[0];
console.log(p_obj.nextElementSibling);  // p_obj的下一个同级元素

操作节点

// 创建节点
    obj = document.createElement('p')
    <p></p>
    obj.innderText = 'p标签'
    <p>p标签</p>
// 添加节点
    父节点.appendChild(子节点对象)
    父节点.insertBefore(要添加的子对象,参考节点对象)
// 删除节点
    父节点.removeChild(子节点对象)
// 克隆节点
    节点.cloneNode()   只拷贝一层
    节点.cloneNode(True) 拷贝所有子节点
// 替换节点
    父节点.replaceChild(新对象,旧子节点)

创建标签

obj = document.createElement('p');  // 创建一个p标签

obj.innerText = '我是一个p标签'; // 给创建的p标签插入值

插入节点

appendChild 在查找到的元素最后一个元素的位置追加
insertBefore 在查找到的元素前插入

// appendChild
var p = document.createElement('p');
p.innerText = '我是一个p标签'
var obj = document.getElementById('d1');
obj.appendChild(p); // 将p标签插入到obj子标签的最后位置

// insertBefore
var p = document.createElement('p');
p.innerText = '我是一个p标签'
var obj = document.getElementById('d1');
var p2 = obj.firstElementChild;

obj.insertBefore(p,p2); // 将p标签插入到p2标签前

删除子节点

var obj = document.getElementById('d1');
// var las_obj = obj.lastElementChild;
var las_obj = document.getElementsByTagName('a')[0];
obj.removeChild(las_obj);  // 父节点 删除  las_obj

删除自己

var a_obj = document.getElementsByTagName('a')[0];
var di_obj = a_obj.parentElement;
di_obj.removeChild(a_obj);

复制节点

var obj = document.getElementById('d1');
var new_obj = obj.cloneNode(true);  
// 不加true 默认只会浅拷贝，例如只会拷贝匹配到的这一行，而不会拷贝这一行的子元素
obj.appendChild(new_obj);

替换节点

var new_p = document.createElement('p');
new_p.innerText = '我是一个新的p标签'
var obj = document.getElementById('d1');
var p_obj = obj.firstElementChild;
// 父节点.replaceChild(新节点,旧节点)
obj.replaceChild(new_p,p_obj);

操作节点内的文本

// innerText pobj.innerText = '<a>我是一个a标签</a>'
// innerText 只人文本 html是不认识的
var new_p = document.createElement('p');
new_p.innerText = '<p>我是一个新的p标签</p>'  
console.log(new_p);

// innerHTML
var new_p = document.createElement('p');
new_p.innerHTML = '<a href="http://www.baidu.com">chaojibaidu</a>'
console.log(new_p);

操作值

var obj = document.getElementsByTagName('input')[0];
obj.value;  // 获取值
"alexvalue"

obj.value = 'cccc';  // 设置值

操作属性

// obj.setAttribute('属性名','属性值')
// obj.getAttribute('属性名')
// obj.removeAttribute('属性名')

var obj = document.getElementById('mi');
// 设置属性
obj.setAttribute('href','http://www.baidu.com')

// 删除属性
obj.removeAttribute('href')

// 获取属性的值
console.log(obj.getAttribute('href'));

操作类

// LOW方法
document.getElementsByTagName('li')[1].setAttribute('class','c_li');

var obj = document.getElementById('mi');
// 查看类的数组
obj.classList;

// 类名的数组中追加
obj.classList.add('c_li2');

// 类名数组中删除
obj.classList.remove('c_li');

// 类名数组中是否存在 存在返回true 不存在返回false
obj.classList.contains('c_li');
true

// 类名数组中存在就删除，没有就加上
obj.classList.toggle('c_li');
true
obj.classList.toggle('c_li');
false

操作样式

// obj.style.样式名 = 样式值
var obj = document.getElementById('mi');
obj.style.backgroundColor = 'red';
"red"

javascrtpt DOM操作

DOM