几种对象
1.Node
Node是一个接口,中文叫节点,很对类型的DOM元素都继承于它,都共同享有相同的基本属性和方法。常见的Node有element、text、attribute、comment、document等(所以要注意节点和元素是有区别的,元素属于节点的一种)
Node有一个属性nodeType标识Node的类型,它是一个整数,其数值分别标识响应的Node类型,
具体如下:
{
ELEMENT_NODE: 1, // 元素节点
ATTRIBUTE_NODE: 2, // 属性节点
TEXT_NODE: 3, // 文本节点
DATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8, // 注释节点
DOCUMENT_NODE: 9, // 文档
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
NOTATION_NODE: 12,
DOCUMENT_POSITION_DISCONNECTED: 1,
DOCUMENT_POSITION_PRECEDING: 2,
DOCUMENT_POSITION_FOLLOWING: 4,
DOCUMENT_POSITION_CONTAINS: 8,
DOCUMENT_POSITION_CONTAINED_BY: 16,
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
}
2.NodeList
NodeList对象是一个节点的集合,一般有Node.childNodes、document.getElementsByName和document.querySelectorAll返回的;
不过需要注意的是,Node.childNodes和document.getElementsByName返回的NodeList结果是实时的(此时跟HTMLCollection比较类似),而document.querySelectorAll返回的结果是固定的,这一点比较特殊。
举例如下:
var childNodes = document.body.childNodes;
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”
3.HTMLCollection
HTMLCollection是一个特殊的NodeList,标识包含了若干元素(元素顺序为文档流中的顺序),通用集合,它是实时更新的,当其所包含的元素发生改变时,它会自动更新,另外,它是一个伪数组,如果想像数值一样操作它们需要使用Array.protoType.slice.call(nodeList,2)这样调用
4.节点操作的相关API
4.1 节点查找API
1)根据ID查找元素:document.getElementById(‘id’)
查找方式 | 描述 |
---|---|
根据ID查找元素 | document.getElementById(‘id’)—如果有多个结果,只返回第一个 |
根据类名查找 | document.getElementByClassName(‘classname’)—返回一个HTMLCollection |
根据标签查找元素 | document.getElementByTagName----返回一个HTMLColletion |
根据元的name属性插查找 | document.getElementByName—返回一个NodeList |
查找单个Node | document.querySelector–返回单个Node,若匹配到多个结果,只返回第一个,IE8+ |
返回NodeList | document.querySelectorAll—返回一个NodeList,IE8+ |
查找当前页面所有form | document. form—返回一个HTMLCollection |
4.2 节点创建API
- 创建元素----父元素.createElement
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);
通过createElement创建的元素并不属于document对象,它只是创建出来,并未添加到html文档中,要调用appendChild和insertBefore等方法将其添加到HTML文档中。
- 创建文本节点------createTextNode
var text = document.createTextNode('我是文本节点')
document.body.appendChild(text)
示例:
假设现有一题目,要求给ul添加1000个li,我们可以使用以下方法
①
要求给ul添加1000个li
这里是立即执行函数
(function () {
//为了计时方便
const timeStart = Date.now();
var ul = document.getElementById('ul');
var str = ''
for (let i = 0; i < 1000; i++) {
str += '<li>第' + (i + 1) + '子节点</li>';
}
ul.innerHTML = str;
console.log('耗时:' + (Date.now() - timeStart) + '毫秒')
})()
②:
(function () {
//为了计时方便
const timeStart = Date.now();
var ul = document.getElementById('ul');
for (let i = 0; i < 1000; i++) {
var li = document.createElement('li')
li.innerHTML = '我是第' + (i + 1) + '个li元素'
ul.appendChild(li);
}
console.log('耗时:' + (Date.now() - timeStart) + '毫秒')
})()
4.3 节点修改API
节点修改API都具有下面几个特点:
1.不管是心新增还是替换节点,如果其原本就在页面上,那么原来位置的节点将被移除;
2.修改之后的节点本身绑定的事件不会消失
-
appendChild----增加节点
语法:parent.addChild(child)
说明:它会将child追加到parent的子节点的最后面。另外,如果被添加的节点是一个页面中存在的节点,则执行后这个节点将会添加到新的位置,其原本所在的位置将移除该节点,也就是说不会同时存在两个该节点在页面上,且其事件会保留。 -
insertBefore–插入节点
说明:将某个节点插入到另外一个节点的前面
语法:parentNode.insertBefore(newNode,refNode)
示例如下:
<div id="parent">
我是父节点
<div id="child">
我是旧的子节点
</div>
</div>
<input type="button" id="insertNode" value="插入节点" />
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").addEventListener('click', function()
{
var newNode = document.createElement("div");
newNode.textContent = "我是新节点";
parent.insertBefore(newNode, child);
}, false);
</script>
- removeChild—删除节点
说明:用于删除指定子节点并饭hi子节点
语法:var deleteChild=parent.removeChile(node)
deleteChild指向被删除的节点,它仍然存在于内存中,可以对其进行下一步操作。另外,如果被删除的节点不是其子节点,则会报错
一般删除节点都是这样删除的,示例如下:
function removeNode(node)
{
if(!node) return;
if(node.parentNode) node.parentNode.removeChild(node);
}
- replaceChild–替换节点
说明:replaceChild用于将一个节点替换另一个节点
语法:parent.replaceChild(newChild,oldChild)
4.4 元素属性型API
- setAttribute----给元素设置属性
element.setAttribute(name,value);
其中,name为属性名,value为属性值
- getAttribute
getAttribute返回指定的属性名相应的特性值,如果不存在,则返回null
var value=element.getAttribute(“id”);
4.5 样式相关的API
- 直接修改元素的样式
elem.style.color="red";
elem.style.setProperty('font-size','16px');
elem.style.removeProperty('color');
- 动态添加样式规则
var style=document.createElement('style')
style.innerHTML='body{color:red} #box{background:red}';
document.head.addChild(style);