JS-DOM基础

1     JS-DOM

全称：document object model

1.1 获取页面元素

getElementsByTagName()：无论元素的数量是多少，都会存入数组

getElementById()：

getElemnetsByClassName()：不推荐使用，有兼容问题。

1.2 标签的自定义属性

1)        通过在html里直接在标签中添加属性；

2)        通过JS添加属性：标签.属性=值；

3)        setAttribute(a,b)设置值为b的属性a，

4)        getAttribute(a)获取属性a，

5)        removeAttribute(a)移除属性a；

<input type="text" id="t" a="haha"/>

<script>

    var t=document.getElementById("t");

    t.c="cc";

    console.log(t.c);

    console.log(t.getAttribute("c"));

    console.log("\n");

    console.log(t.id);

    console.log(t.a);

    console.log(t.getAttribute("id"));

    console.log(t.getAttribute("a"));

    console.log("\n");

    console.log(t.setAttribute("a","bibi"));

    console.log(t.setAttribute("b","lili"));

    console.log(t.getAttribute("b"));

</script>

结果：

 

 

1.3 事件

1.3.1   三要素

1)        事件源（发生事件的对象）

2)        事件名称

3)        事件处理程序（要执行的内容）

如果分不清楚，那么举个栗子：小明被小刚打了，小明就进了医院。那么事件源就是小明，事件名称是：被打了，事件处理就是小明被送进了医院。

1.3.2   注册事件

行内：在对应的标签内添加：on+事件名=“要执行的内容”；

内嵌：

1)        在js标签内书写：对象.on+事件名=function（）{执行内容}

2)        事件监听

注意：使用for循环给一组元素添加事件监听的时候，在事件处理里面千万不要出现for循环的计数器。原因：事件注册的时候是不会执行具体的事件处理代码的，所以执行事件时的计数器就会是最后执行的计数器值。

1.3.3   常用事件：

.onclick():点击

.onmouseover:鼠标进入

.onmousemove:鼠标移动

.onmouseout：鼠标移出

.onkeydown:键盘按下

.onkeyup:键盘抬起

1.4 获取内容

1)        对象.innerHTML：包括标签及文字内容

2)        对象.innerText：只包含文字内容，早期火狐不支持

3)        对象.textContent：只包含文字内容，早期ie不支持

1.5 节点

1.5.1   节点的组成

三种节点	nodeType	nodeName	nodeValue
标签（元素）	1	标签名	Null
属性	2	属性名	属性值
文本（内容）	3	#text	文本内容

<ul id="ul">
    <li>111</li>
    <li>222</li>123
    <li id="li">333</li>
    <li>444</li>
</ul>

<script>
    var ul = document.getElementById("ul");
    var ulId=ul.getAttributeNode("id");
    console.log(ulId.nodeName);
    console.log(ulId.nodeType);
    console.log(ulId.nodeValue);

    var li = document.getElementById("li");
    var lis = ul.childNodes;
    for (var i=0;i<lis.length;i++) {
        console.log(lis[i].nodeName);
        console.log(lis[i].nodeType);
        console.log(lis[i].nodeValue);
    }
</script>

结果：

 　　　　

 

1.5.2   节点的获取

父节点：parentNode；

子节点：

childNodes:标准的DOM属性，获取所有，包括文本节点，IE8及以前会忽略空白文本节点

children：非标准DOM属性，只获取元素（标签）节点，所有浏览器都支持。

兄弟节点：

previousSibling：IE8及以前会忽略空白文本节点

previousElementSibling:IE8及以前不支持

nextSibling:IE8及以前会忽略空白文本节点

nextElementSibling:IE8及以前不支持

<ul id="ul">

    <li>111</li>

    <li>222</li>123

    <li id="li">333</li>123

    123<li>444</li>

</ul>

<script>

    var ul=document.getElementById("ul");

    var li=document.getElementById("li");

    console.log(ul.childNodes);

    console.log(ul.children);

    console.log(li.parentNode);

    console.log(li.previousSibling);

    console.log(li.previousElementSibling);

    console.log(li.nextSibling);

    console.log(li.nextElementSibling);

</script>

在chorm中的执行结果：

 　

IE8中的结果:

 

总结：

	Chorm，firefox等	IE8及以前
.childNodes	标签节点+文本节点	标签节点+非空文本节点
.children	标签节点	标签节点
.previousSibling	标签节点||文本节点	非空文本节点||标签节点
.previousElementSibling	标签节点	Undefined
.nextSibling	标签节点||文本节点	非空文本节点||标签节点
.nextElementSibling	标签节点	Undefined

1.5.3   操作节点

.cloneNode(boolean)：复制节点，true全部克隆，false只克隆当前标签节点

.appendChild():追加节点到末尾

<ul id="ul">
    <li>1111</li>
    <li>2222</li>
    <li id="li">3333</li>
    <li>4444</li>
</ul>

<script>
    var ul=document.getElementById("ul");
    var li=document.getElementById("li");
    ul.appendChild(li.cloneNode(true));
    ul.appendChild(li.cloneNode(false));
    ul.appendChild(ul.cloneNode(true));
</script>

结果：

.removeChild()：移除子节点

.insertBefore(a,b):将子元素a插入到b之前

1.6 动态 创建元素

document.write();注意：写在函数内会覆盖原来的页面元素

innerHTML注意：使用它拼接字符串效率非常低

document. createElement("标签名")