我们可以通过 Node 对象进行对 DOM 中节点的操作和管理。Node 对象是 DOM 中所有节点的基类,可以继承给 Element、Comment、Text 等具体节点类。
常用的 Node 对象属性和方法包括:
nodeType
:表示节点类型的数字代码,比如元素节点为1、文本节点为3、注释节点为8等。nodeName
:表示节点名称的字符串代码,元素节点为标签名,文本节点为 #text,注释节点为 #comment 等。nodeValue
:表示节点的值,对于文本节点、注释节点和 CDATA 节点,都存储在该属性中。parentNode
:表示父节点,每个节点都只有一个父节点。childNodes
:表示子节点,是一个节点列表,包含了该节点下所有的子节点。firstChild
:表示第一个子节点。lastChild
:表示最后一个子节点。previousSibling
:表示前一个兄弟节点。nextSibling
:表示后一个兄弟节点。#document
是最高的结点
结点的位置 在body 下是属于 body, 在body 上属性 headappendChild( node )
:向子节点列表的末尾添加新的节点。removeChild( node )
:从列表中删除指定的子节点。replaceChild( node, oldnode )
:用新节点替换一个子节点。cloneNode()
:复制当前节点并返回一个副本。hasChildNodes()
:检查节点是否包含子节点。contains(node)
: 判断是否存在子结点(IE)getAttribute(attribute_name)
setAttribute(attribute_name,value)
removeAttribute(attribute_name)
hasAttributes()
我们可以通过以下代码来获取文档中所有的 P 元素,并修改它们的属性和样式:
// 获取所有 P 元素
var paragraphs = document.getElementsByTagName("p");
// 循环遍历所有 P 元素,修改属性和样式
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].setAttribute("class", "my-paragraph");
paragraphs[i].style.color = "red";
}
上述代码中,我们通过调用 getElementsByTagName() 方法来获取文档中的所有 P 元素,并使用循环遍历对其进行样式和属性的修改。其中,setAttribute() 方法用于设置元素的 class 属性,style.color 属性用于设置元素的文本颜色。
options
: select 结点下的备选项集合
<body>
<select id="sel" >
<option value="1" selected >aoption>
<option value="2" >boption>
<option value="3" >coption>
<option value="4" >doption>
select>
<input type="button" value="" onclick="sel()">
body>
<script type="text/javascript">
function sel(){
var sel=document.getElementById("sel");
alert(sel.options.length); //集合长度
alert(sel.selectedIndex); //被选中的序号
alert(sel.value); //当前value
alert(sel.options[sel.selectedIndex].innerHTML);//当前的显示的内容
sel.selectedIndex=2; //改变选中的
}
script>
rows
: table 结点下的 tr集合
cells
: table 或者 tr 下的 td 集合
frames
: window 框架页下的 frame子窗口集合
document下的 form 集合
alert(document.forms[0].action);
alert(document.queryForm.action);
alert(document.forms["queryForm"].elements["page.hyName"].name);
form结点 下的 元素集合
document 一个web文档或一个页面
document.URL //完整的URL
document.title //
document.referrer //来源网页的URL
document.domain //url的一部分
document.lastModified
document.bgColor
document.fgColor
document.linkColor
document.alinkColor
document.vlinkColor
document.cookie
document.documentElement //始终指向
document.body //始终指向
document.doctype //始终指向<
document.write()
document.writeln() // writeln 后面显示一个空格而不是换行,换行用
查询页面元素
document.getElementById("元素id") // 返回 id对应元素
document.getElementsByName("name属性值") // 返回 相同name属性值的元素数组
document.getElementsByTagName("标签名") // 返回 相同标签类型的元素数组
document.getElementsByClassName("class属性值") //返回 相同class属性值的元素数组
修改页面元素的属性值, 样式, inner值 , 绑定事件
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
.bgcGreen{
background : #99FFCC;
}
style>
head>
<body>
<input type="button" value="我是一个小按钮" class="bgcGreen" onclick="edit(this)">
<input type="button" value="我也是一个大按钮" style="color:red;" id="dbut" >
<font id="ta" color="red" size="+2" >font>
<font id="ta2" color="blue" size="+3" >font>
body>
<script type="text/javascript">
function edit(but){
//修改属性
but.value="不小呀";
修改样式
document.getElementById("dbut").style.color="blue";//改样式
document.getElementById("dbut").className="bgcGreen";//改样式表
but.style.display="none";
修改innerHTML
document.getElementById("ta").innerHTML="这是一个文本域";
document.getElementById("ta2").innerText="这是一个文本域";
改事件
document.getElementById("dbut").onclick=function(){
alert("我的事件是新加的");
}
}
script>
html>
removeChild( Element )
<body>
<input type="button" value="删除后面的那个" onclick="del()">
<input type="button" value="我要被删除了" style="color:red;" id="dbut" >
body>
<script type="text/javascript">
function del(){
//要删谁
var dbut=document.getElementById("dbut")
//找他爹
var p=dbut.parentNode;
//他爹来领走他
p.removeChild(dbut);
}
script>
remove()
<body>
<input type="button" value="删除后面的那个" onclick="del()">
<input type="button" value="我要被删除了" style="color:red;" id="dbut" >
body>
<script type="text/javascript">
function del(){
document.getElementById("dbut").remove()
}
script>
deleteRow(index) , deleteCell(index)
<body>
<table id="ta" border="1">
<tr>
<td>11td><td>12td>
tr>
<tr>
<td>21td><td>22td>
tr>
table>
<input type="button" value="删除表格中的行" onclick="del()">
body>
<script type="text/javascript">
function del(){
document.getElementById("ta").deleteRow(1)
}
script>
createElement()
appendChild()
insertRow()
insertCell()
//创建一个元素
var input=document.createElement("input");
//设置这个元素的属性
input.value="我是一个从天上来的";
input.type="button";
input.onclick=function(){
alert("脸好疼");
gdl();
glf2();
}
//把他放到地球上
document.body.appendChild(input)
function gdl(){
var table=document.createElement("table");
table.border="1"
table.id="nt";
var tbody=document.createElement("tbody");
var tr1=document.createElement("tr");
var tr2=document.createElement("tr");
var td11=document.createElement("td");
td11.innerHTML="101"
var td12=document.createElement("td");
td12.innerHTML="102"
var td21=document.createElement("td");
td21.innerHTML="201"
var td22=document.createElement("td");
td22.innerHTML="202"
tr1.appendChild(td11);
tr1.appendChild(td12);
tr2.appendChild(td21);
tr2.appendChild(td22);
tbody.appendChild(tr2);
tbody.appendChild(tr1);
table.appendChild(tbody);
document.body.appendChild(table)
}
function glf2(){
var table=document.getElementById("nt");
var tr=table.insertRow(1);
var td2=tr.insertCell(0);
td2.innerHTML="新102"
var td1=tr.insertCell(1);
td1.innerHTML="新101"
}