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);