DOM相关

DOM

文档对象模型document object model

提供了一套操作文档流(页面)的api

1.先获取元素

2.再操作 操作样式

API

获取元素

1.document.getElementById('id名'); 通过id获取元素（获取一个）

2.document.getElementsByTagName('标签名'); 获取所有对应标签名的元素，获取的为 伪数组形式

3.document.getElementsByClassName('类名'); 获取所有对应类名的元素，获取的为 伪数组形式

4.document.getElementsByName('name值'); 获取所有对应类名的元素，获取的为 伪数组形式

5.document.querySelector('标签名'); 通过选择器获取，只获取一个（第一个）

document.querySelectorAll('标签名’); 通过选择器获取，获取所有

6.document.body; 获取body

document.documentElement; 获取html

document.title; 获取tltle

document.head; 获取head

操作样式【style方式，追加到行内】

style法把样式都添加到行内了

oDiv.style.属性名=“属性值”;

oDiv.style.background="颜色值";

oDiv.style.fontSize="值";

oDiv.style.width="值";

className法把样式都添加类名

oDiv.style.backgroundcolor="类名";

追加类名

oDiv.classList.add=('类名'); 增加类名

oDiv.classList.remove=('类名'); 删除类名

oDiv.classList.toggle=('类名'); 切换类名

操作内容

1.表单控件

获取内容：var oDiv=document.querySelector('div');

设置内容：oIpt.value = "新增内容 ";

2.非表单控件

获取内容：元素.innerHTML;（oDiv.innerHTML）

设置内容：innerHTML = "<b></b>";

可以解析标签

获取内容：元素.innerText;（oDiv.innerText）

设置内容：innerText = "xx";

不支持解析标签

设置属性

属性分为自定义属性和固有属性

自定义属性：自己定义的属性（自己命名和定义的）

getAttribute 获取元素的某个属性（包括自定义属性）

setAttribute 给元素设置一个属性（包括自定义属性）

removeAttribute 直接移除元素的某个属性

节点

页面上所有的元素都可以称为节点，DOM的最小单元就是节点

标签：元素节点（nodeType 1）

oDiv.firstChild.nodeType

属性：属性节点（nodeType 2）

文本：文本节点（nodeType 3）

注释：注释节点（nodeType 8）

文档：文档节点（nodeType 9）

DOM以树状图的形式出现

通过节点关系(父子关系)(兄弟关系)，来获取节点：

父节点.firstChild:获取父元素的第一个子节点

节点.nextSibling： 节点的下一个兄弟节点

节点.previousSibling： 节点的上一个兄弟节点

父节点.lastChild： 节点的最后一个子节点

节点.parentNode： 节点的父节点

父节点.childNodes： 获取所有的子节点（伪数组）

获取元素节点：

父节点.firstElementChild:获取父元素的第一个子元素节点

节点.nextElementSibling： 节点的下一个兄弟元素节点

节点.previousElementSibling： 节点的上一个兄弟元素节点

父节点.lastElementChild： 节点的最后一个子元素节点

节点.parentElementNode： 节点的父元素节点（兼容性不好，已弃用）

父节点.children： 获取所有的子元素节点（伪数组）

oDiv.children[2]; 第2个子元素节点

节点的操作：

1.创建节点：

语法：document.createElement('标签名');

var oLi=document.createElement('li')

返回值：创建好的元素节点

2.追加节点：

语法：父节点.appendChild(子节点)

含义：将子节点追加到父节点的尾部

例子：document.body.appendChild(子节点);

oBox.appendChild(oBtn);

3.插入节点

语法：父节点.insertBefore(子节点，插入的位置(谁的前面))

含义：将子节点插入到父节点的指定位置

例子：oBox.insertBefore(oBtn,oBox.Children[1]);

将button插入到oBox的头部

4.替换节点

语法：父节点.replaceChild(新节点，旧节点)

节点位置，比如children[0]/oUl.children[2]

5.删除节点

语法：父节点.removeChild(子节点)

节点.remove() //常用

oBox.children[0].remove;

oBox.removeChild(oBox.children[0]);

例：oUl.lastElementChild.remove();//删除最后一个元素

6.克隆节点

语法：节点.cloneNode()

含义：克隆出来一个节点

true：代表克隆

获取行间样式：

oDiv.style.width

window.getComputedStyle(oDiv,null['width']);

获取非行间样式

非ID浏览器写法：

window.getComputedStyle(oDiv,null)['width'];

IE浏览器写法：

oDiv.currentStyle["width"];