百木园简介
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
来源：https://blog.csdn.net/qq_61181575/article/details/123174407
本站部分图文来源于网络，如有侵权请联系删除。