JavaScript-Dom
JavaScript-Dom
JavaScript-Dom
简介
DOM：Document Object Model
节点
HTML 文档中的所有内容都是节点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
document对象
常用属性
名称 | 说 明 |
|---|---|
referrer | 返回载入当前文档的**URL** |
URL | 返回当前文档的**URL** |
document.referrer
document.URL
document常用方法
名称 | 说 明 |
|---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象的集合 |
getElementsByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
节点的属性
属性名称 | 描述 |
|---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合，childNodes[i] |
firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
var obj=document.getElementById("news");
var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
////var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
alert(str);element属性
属性名称 | 描述 |
|---|---|
firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
节点的信息
var nodes=document.getElementById("nodeList");
var type1=nodes.firstChild.nodeType;
var type2=nodes.firstChild.firstChild.nodeType;
var name1=nodes.firstChild.firstChild.nodeName;
var str=nodes.firstChild.firstChild.nodeValue;
var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
document.getElementById("nodeList").nextSibling.innerHTML=con;操作节点
操作节点的属性
名称 | 描述 |
|---|---|
getAttribute("属性名") | 获取属性值 |
setAttribute("属性名","属性值") | 设置属性值 |
var ele=document.getElementsByName("book");
var img=document.getElementById("image");
if(ele[0].checked){
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
img.nextSibling.innerHTML="我和狗狗一起活下来";
}
else if(ele[1].checked){
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.nextSibling.innerHTML="灰霾来了怎么办";
}创建和插入节点
名称 | 描述 |
|---|---|
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild( B) | 把B节点追加至A节点的末尾 |
insertBefore( A,B ) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
var ele=document.getElementsByName("book");
var bName=document.getElementsByTagName("div")[0];
if(ele[0].checked){
var img=document.createElement("img");
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
bName.appendChild(img);
}
else if(ele[1].checked){
var img=document.createElement("img");
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.setAttribute("onclick","copyNode()")
bName.appendChild(img);删除和替换节点
名称 | 描述 |
|---|---|
removeChild( node) | 删除指定的节点 |
replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
操作节点样式
改变style属性
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";改变className属性
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
获取元素的样式
document.getElementById("cartList").display
document.getElementById("cartList").currentStyle.display