JAVAscript中的DOM

DOM

DOM（Document Object Model）： 文档对象模型

可操作内容

获取一个元素

//通过 js 代码来获取页面中的标签
 document.getElementById//是通过标签的 id 名称来获取标签的
document.getElementsByClassName//标签的 class 名称来获取标签的
document.getElementsByTagName//标签的 标签 名称来获取标签的
document.querySelector//按照选择器的方式来获取元素
	//只能获取到一个元素，并且是页面中第一个满足条件的元素
document.querySelectorAll//选择器的方式来获取元素
	//能获取到所有满足条件的元素，以一个伪数组的形式返回

移除一个元素

`removeChild`//语法：`父节点.removeChild(要移除的字节点)`

修改页面中的某一个节点

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

创建一个元素

document.createElement('div')//用于创建一个元素节点
document.createTextNode('我是一个文本')//用于创建一个文本节点

向页面里面添加一个元素

Div.appendChild(oText)//语法： `父节点.appendChild(要插入的子节点)`
`insertBefore`//语法： `父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)`

给元素绑定一些事件

元素.事件名=function(){函数}

获取元素的属性

innerHTML 
	获取元素内部的 HTML 结构
	设置元素的内容
innerText
	获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）
	可以设置元素内部的文本
元素.getAttribute（）
	获取元素的某个属性（包括自定义属性）
 元素.setAttribute（）
	给元素设置一个属性（包括自定义属性）
元素.removeAttribute（）
	直接移除元素的某个属性

给元素添加一些 css 样式

style
	专门用来给元素添加 css 样式的
	添加的都是行内样式
className
	专门用来操作元素的 类名的
	也可以设置元素的类名，不过是全覆盖式的操作

DOM节点

元素节点

`getElementBy...` 获取到的都是元素节点

文本节点

`innerText` 获取到的就是元素的文本节点

属性节点

 	getAttribute 获取的就是元素的属性节点获取节点
	Div.childNodes
		获取某一个节点下 所有的子一级节点
	Div.children
		`children` 只要元素节点
	Div.firstChild
		获取某一节点下子一级的 **第一个节点**
	Div.lastChild
		获取某一节点下子一级的 **最后一个节点**
	Div.firstElementChild
		获取某一节点下子一级 第一个元素节点
	Div.lastElementChild
		获取某一节点下子一级 **最后一个元素节点**
	Li.nextSibling
		获取某一个节点的 **下一个兄弟节点**
	Li.previousSibling
		获取某一个节点的 **上一个兄弟节点**
	Li.nextElementSibling
		获取某一个节点的 **下一个元素节点**
	Li.previousElementSibling
		获取某一个节点的 **上一个元素节点**
	Li.parentNode
		获取某一个节点的 **父节点**
	Li.attributes
		获取某一个 **元素节点** 的所有 **属性节点**

节点属性

nodeType
	获取节点的节点类型，用数字表示
nodeName
	获取节点的节点名称
nodeValue
	获取节点的值

获取元素的非行间样式

getComputedStyle
	语法：`window.getComputedStyle(元素, null).要获取的属性`（非IE使用）
currentStyle
	语法： `元素.currentStyle.要获取的属性`（IE使用）

获取元素的偏移量

`offsetLeft`
	左边的偏移量
		没有定位的情况下
			获取元素边框外侧到页面内侧的距离
		有定位的情况下
			获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的 `left` 和 `top` 值（margin+position）
`offsetTop`上边的偏移量
`offsetWidth`
`offsetHeight`
	获取元素 `内容宽高 + padding宽高 + border宽高` 的和

元素.clientHeight
	高（只能获取）
		cont+padding
元素.clientWidth
	宽（只能获取）
元素.scrollWidth
	包含滚动的距离（可获取可设置）
元素.scrollHeight
元素.scrollTop
	滚动的距离（必须配合事件）
元素.scrollLeft