自学分享: JavaScript -- DOM 文档对象模型和基础调用方法

1、DOM （document object Model）

1.1概念

文档对象模型,通过一段程序动态的访问和更新文档的内容、机构和样式。

静态网页
动态网页

在DOM中就是将一个文档看做出一个节点树。

DOM就是提供一系列方法（API）对这些节点树进行增删改查

1.2节点树

2、节点

2.1分类

元素节点（标签）

属性节点（标签上的属性）

文本节点（标签之间的文本）

2.2获取元素节点的方法

document.getElementById(ID名字)通过id（唯一）获取标签

document.getElementsByTagName（标签名字）返回的是一个类数组集合。

document.getElementByName（标签 name 属性）返回的是一个类似数组的集合(少用)

document.getElementsClassName(标签class)返回的还是一个集合

document.quereySelector(部分css选择器的写法)返回第一个

document.quereySelectorAll()全都拿走 集合 和css类似

document.body 获取body标签

document.documentElement 获取 html标签。

document.表单name。表单标签name。

//辅助方法
hasChildNodes()判断是否有子节点 ture和false
ChildNodes 返回所有子节点的名字
firstChild 返回第一个子节点。
lastChild 返回最后一个子节点
nextSibling 返回后面的兄弟节点
previousSibling 返回前面的兄弟节点。

parentNode 返回父节点。
children 返回子节点 返回的集合 不是数组。

2.3属性节点操作

元素名.attributes
取得所有的属性。

元素名.属性名
获取某个属性，但是获取class 的时候要写为className.

元素名·getAttribute(属性名)
这种方法获取class可以直接写class。

设置属性：
元素.属性名 = ‘属性值’；
元素.setAttribute（‘属性名’，‘属性值’）；避免设置style和onclik

元素.removeAttribute（‘属性名’）
移除某个属性。

hasAttribute（’ '）判断是否有某个属性 返回布尔值。
HTML5 中可以自定义属性，所有自定义属性以 data-自定义属性名

dataset
HTML5 自定义属性获取方法。
元素.dataset.属性名 //属性名不写data-，

2.4文本节点操作

innerHTML
可以重写标签中的内容,会解析成HTML的格式显示。

innerText
只是添加文本额.

outerHTML
替换整个节点

value
获取表单的值.
可以是获取也可以是设置

2.5节点属性

节点.nodeName
元素节点返回 标签名;
属性节点返回 属性名;
文本节点始终返回 #text;

节点.nodeValue(返回节点的值)
元素节点返回 undefined 或者 null;
属性节点返回 属性值;
文本节点返回 文本

元素.nodeType
元素节点返回1
属性节点返回2
文本节点返回3

3.css操作

元素.style.css属性
注意:设置的时候是将css 添加到行内的。
获取的时候只能获取行内已有属性。
如果设置float 要写为cssFloat.

元素.style.cssText + ‘;height:50px’
批量增加css.

注意:会覆盖原来的style

保证原来的style不被cssText覆盖

获取当前标签渲染后的所有样式
IE:element.currentStyle
window.getComputedStyle(element,null)
box . className = ‘bg’

最佳修改css是控制class.

4.节点操作

document.createElment(标签名)
创建一个元素节点(标签).

document.createTextNode(文本)
创建文本节点.

parentNode.appendChild(子节点)
将子节点添加到父节点的最后.

parentNode.insertBefore(newNode, oldNode)
将newNode 插入到oldNode之前.

parentNode.replaceChild(newNode,oldNode)
用newNod 替换 oldNode.

parentNode.removeChild(子节点)
移除某个子节点.

cloneNode(bool)
克隆节点.
如果bool不写或者为false,则只会克隆标签和属性.
如果bool为true,则该节点的所有后代节点也会被克隆.

5.元素判断

1.元素大小(API)

clientwidth/ clientHeight (滚动条7个像素)
获取元素大小，包含内边距。(可用大小,加了滚动条)

offsetwidth / offsetHeight
获取元素大小，包含内边距和边框。

scrollWidth / scrollHeight
元素内容实际大小，带有滚动条的总宽高。

2.获取元素位置

offsetLeft / offsetTop
获取元素相对父元素的位置.(会受到margin的影响)

最好设置父元素定位,否则不同的浏览器会有不同的处理.

scrollTop
获取滚动条被隐藏的区域大小.

fa.onscroll(滚动事件) = function{
console.log(fa.scrollTop)
}

往期文章,字符串和正则表达式
数组的遍历方法和去重