Javascript-DOM总结
DOM总结
1.DOM的含义
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。
DOM 中的节点：
* 整个文档就是一个文档节点。
* 而每一个HMTL标签都是一个元素节点(divElement)。
* 标签中的文字则是文本节点(div)。
* 标签的属性是属性节点(divAttribute)。
* 一切都是节点
2.查找元素
1.通过id获取某个标签，
document.getElementById('id名字');
2.通过类型名字获取多个标签
var allA = document.getElementsByClassName('a');
3.通过标签的name (a 或者 表单中)属性获取多个标签
document.getElementsByName('对应的name');
4.通过标签名字获取多个标签
var allDiv = document.getElementsByTagName('DIV')
5,通过选择器获取某个标签 (如果有多个标签,会返回找到的第一个)
var aDiv = document.querySelector('div');
6,通过选择器获取多个标签
document.querySelectorAll('选择器名字');
3.DOM节点-元素
1.获取到标签在内的所有文字
alert(标签名字.outerHTML)例如li
2.通过dir可以看到所有关于节点的属性信息
console.dir(标签名字)例如li
3.for in 可以看到关于节点的所有属性和方法
4.获取某个节点的前一个或者是后一个元素节点
alert(li1.previousElementSibling.innerText);
alert(li1.nextElementSibling.innerText);
5..获取某个节点的前一个或者是后一个元素节点（可能是空白文本节点）
alert(li1.previousSibling.nodeName);
alert(li1.nextSibling.nodeName);
6.获取ul中第一个子节点
alert(ul.firstChild);
获取ul中的第一个 子 元素！！！！节点
alert(ul.firstElementChild);
alert(ul.lastElementChild.innerText);
7.创建一个新的li节点
var newLi = document.createElement('li');
newLi.innerText = 'JQuery';
newLi.style.color = 'red';
8.往ul的最后追加一个子节点
ul.appendChild(newLi);
9.用一个新的节点替换 之前的某一个子节点
ul.replaceChild(newLi,li1);
10. 移除某一个子节点（要移除的节点必须是 ul的一个子节点）
ul.removeChild(newLi.previousElementSibling);
11.往某一个子节点前 去插入一个新的节点
ul.insertBefore(newLi,li1);
12.往ul中插入新的节点对象 位置+节点对象
'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
ul.insertAdjacentElement('afterEnd',newLi);
13.插入html代码
ul.insertAdjacentHTML('beforeBegin','<p>ppppp</p>');
14.插入文本
ul.insertAdjacentText('afterBegin','开始之后')
4.DOM节点-文本
1.for 遍历
for (var i = 0; i < ulChild.length; i++) {
使用驼峰命名法对变量 或者 函数 命名 goShoppingToMall
var aNode = ulChild[i];
判断当前遍历到的记得点是不是 某一个系统的节点类型元素ELEMENT 属性ATTRIBUTE 文本 TEXT
if (aNode.nodeType == Node.ELEMENT_NODE) {
宏定义 用数字代表节点类型 1，元素 2，属性节点 3，文本节点
alert(aNode.nodeType);
alert(aNode.nodeName);
}
}
2.children 获取内部的子！！！元素！！！节点
childNode 获取内部的子 节点 （包含文本节点）
var cssText = ul.children[1].childNodes[0];
获取文本节点中的文本
alert(cssText.nodeValue);
alert(cssText.textContent);
3.追加数据
cssText.appendData('CSS');
a:从第几个字符开始 从0开始
b:删除多长的数据
cssText.deleteData(3,1);
4.替换某一个范围的字符为另外一段字符
cssText.replaceData(1,2,'CCCCC');
5.把某一段字符插入到 某个位置（考虑插入之后在什么位置）
cssText.insertData(2,'A');
5.移除文本节点中的文字
cssText.remove();
5.DOM节点-属性
1.所有的属性
alert(a.attributes.length);
2.直接对元素节点调用 get方法来获取
alert(a.getAttribute('title'));
3.也可以通过set方法 来修改某一个属性的值
a.setAttribute('title','在点我一下');
4.也可以通过打.的方式快速获取某一个属性的值
alert(a.title);
a.title = '不要再点了';
5.设置快捷键
alt + shift + A 浏览器中测试
a.accessKey = 'A';
6.设置标签是否可以编辑
a.contentEditable = 'true';
7.判断元素是否包含某个属性
alert(a.hasAttribute('title'))
8.获取元素的类型
alert(a.className)
9.直接修改元素的类型 可能会导致之前的类型丢失
a.className = 'bigSize yellowText';
往a的类型列表中直接添加某一个新类型，不会影响之前的类型
a.classList.add('border');
删除某个属性
a.classList.remove('bigSize');
10.切换是否使用某一个类型
如果本来有 就移除 本来没有 就添加
a.classList.toggle('bigSize');
11.刚才通过js设置的样式可以拿到
直接写在属性中的样式可以拿到
写在样式表（Style标签）中的样式js拿不到
a.style.padding = '20px';
alert(a.style.padding);
12.获取计算之后（包括属性中的，样式表中的，js中修改的）的样式
var aStyle = window.getComputedStyle(a,':after');
alert(aStyle.border);