1-DOM

DOM

一、获取页面元素

1、通过dom提供的API接口获取页面元素

(1)、根据ID获取

• document.getElementById（）

(2)、根据标签名获取

• document.getElementByTagName（）

• element.getElementByTagName（）

(3)、根据类名获取

• document.getElementByClassName（）

(4)、根据选择器获取

• document.querySelector（）

• document.querySelectorAll（）

(5)、获取页面特殊元素（body、html、title）

• document.body;

• document.documentElement;

• var originalTitle=document.title;//获取文档标题
  document.title="HelloWolrd";//设置文档标题

2、通过节点获取页面元素

(1)、获取父节点

• node.parentNode

• 返回的是最近的父级元素

• node.parentElement

(1)、获取子节点集合

包含文本节点

• node.childNodes

• node.firstChild

• node.lastChild

只有元素节点

• node.children

• node.firstElementChild

• node.lastElementChild

(3)、获取兄弟节点集合

包含文本节点

• node.nextSibling

• node.previewSibling

包含文本节点

• node.nextElementSibling

• node.previewElementSibling

二、修改HTML节点

1、获取/设置元素内容

(1)、获取HTML文本

element.innerHTML

(2)、设置HTML文本

element.innerHTML="内容"

(3)、获取“渲染”文本

element.innerText

(4)、设置“渲染”文本

element.innerText = "内容";

innertext和innerHTML的区别

• innerHTML和innertext获取的都是字符串

• innerHTML是获取的HTML代码，innertext是获取的纯文本

• 设置innerHTML如果有HTML代码，那么HTML代码会被执行，而innerTEXT只会认为是文本

(3)、设置表单的值

//element：表单元素
//获取表单的内容
element.value
//设置表单的内容
element.value="内容"

2.获取/设置元素属性

获取固有属性

(1)、获取属性，返回属性值

element.属性名

(2)设置属性

element.属性名=属性值

获取自定义属性

(1)、获取单个元素属性

element.getAttribute(attrName);

(2)、获取属性集合

• 使用attributes的方式一次性将属性全部取出

element.attributes;

(3)、设置属性

element.setAttribute(attrName，value)

(4)、检查标签属性

element.hasAttribute(attrName) //返回布尔值

(5)、删除属性

element.removeAttribute(attrName)

三、添加HTML节点

(1)、创建元素

var element = document.createElement(tagName[, options]);

• 创建文本节点

  • text 是一个文本节点。

  • data 是一个字符串，包含了要放入文本节点的内容。

var text = document.createTextNode(data);

• 克隆节点

  • node 将要被克隆的节点

  • dupNode 克隆生成的副本节点

  • deep是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

var dupNode = node.cloneNode(deep);

(2)、追加/添加节点

1\在元素的后面添加

• aChild 要追加给父节点（通常为一个元素）的节点。

element.appendChild(aChild)

2\在指定节点前插入新节点

• parentNode 新插入节点的父节点

• newNode 用于插入的节点

• referenceNode 将要插在这个节点之前

parentNode.insertBefore(newNode, referenceNode);

3\替换节点

父节点.replace（新节点，旧节点）

（3）删除HTML节点

• 删除节点

element.removeChild(child);

• 替换节点

parentNode.replaceChild(newChild, oldChild);

四、DOM CSS样式操作

1.样式属性操作

可以通过js修改元素的大小、颜色、位置等样式

(1)、 行内样式操作

element.style

(2)、类样式操作

element.className

注意点

• JS里面的样式采取驼峰命名法，比如fontSize、backgroudColor

• JS修改style样式操作，产生的是行内样式，CSS权限比较高

2.获取元素样式

2.1 获取行内样式的属性

HTML元素.style.样式属性

2.2 获取内嵌样式或外部样式的属性(IE浏览器)

HTML元素. currentStyle.样式属性

2.3 获取内嵌样式或外部样式的属性（标准浏览器）

document.defaultView.getComputedStyle(元素,null).属性

3、操作元素样式

element.style.样式属性=属性值

//会覆盖住这个标签以前的类名
elememt.className="类名"
//所以
element.className=“以前的类名  类名”
//或者
element.classList.add('类名')

//移除类

element.classList.remove('类名‘)

4、获取盒模型以及内容区域大小

需要注意的是offset系列属性都只读，且不带单位

（一）元素偏移量offset系列

(1)、offsetHeight和offsetWidth

• 返回的自身宽度/高度，包含内边距、边框、内容区的宽度

(2)、offsetLeft和offsetTop

• 返回元素相对带有定位的父元素的左/上偏移量

(3)、 offsetParent ： 返回已定位的最近的父元素

在父div使用了position的情况下，返回的是父div。如过父元素没有使用，那么直接向上找已定位的父级元素.如果没有的话，那么会找到body元素作为offsetParent。

（二）元素可视区client系列

(2)、element.clientWidth/Height

• 返回的自身可视区的宽度/高度，包含内边距、内容区的宽度,不带边框

(1)、element.clientTop/left

• 返回元素的上边框/左边框的大小

（三）元素滚动Scroll系列

(1)、scrollWidth/scrollHeight

• 返回自身的实际宽度/高度，不包含border边框

(2)、scrollLeft/scrollTop

• 返回被卷去的左侧和上侧