Javascript-DOM总结

Posted 2020-08-15 前端YYK

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