文章目录
- 1.初步认识DOM
- 2.属性节点
- 3.节点操作
- 1.节点的添加
- 2.节点的删除
- 3.节点的修改
DOM（文档对象模型）
1.初步认识DOM
这个html文档结构树被称为DOM（文档对象模型）。DOM定义了访问HTML文档的标准。关于DOM，需要了解以下几点
1）DOM是Document Object Model的缩写。
2）DOM是一组用来描述脚本怎么与结构化文档进行交互和访问的web标准。
3）DOM定义了一系列对象、方法和属性，可以通过JavaScript访问、操作和创建文档中的内容、结构、样式以及行为。
4）DOM可以说就是为了获得对象而存在的。
文档节点树中的节点彼此也拥有层级关系。
我们用父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。
父节点拥有子节点。同级的子节点被称为同胞，它们的关系如下：
1）<html>元素没有父节点，它是根节点
2）<head>和<body>的父节点是<html>节点，<head>与<body>是同胞节点
3）文档节点“张三”的父节点是<strong>节点
4）<head>元素是 <html>元素的首个子节点
5）<body>元素是<html>元素的最后一个子节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>试一试</title>
<script type="text/javascript">
window.onload=function(){
var oP=document.getElementById("intro");
//获取ID标签和他绑定,返回的是[object HTMLParagraphElement]
console.log("p标签的内容为："+oP.innerHTML);//获取ID里面的内容
};
</script>
</head>
<body>
<p id="intro">hello dom</p><!-- 为元素定义唯一标识 -->
</body>
</html>
当网页读取到js代码时，所有构建及下载暂停，需要将js代码全部加载完成后才能继续构建网页。window.onload方法会在DOM节点树加载完成后触发，此时DOM文档树加载完成，可以通过js代码随意操作。
2.属性节点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点属性获取</title>
</head>
<body>
<p id="intro"name="myName"value="1XXXXXXXXXXXX">
Hello Dom！
</p>
<script>
function getProperty(flag) {
_flag = "<br>nodeName:" + flag.nodeName + "<br>nodeType:" + flag.nodeType + "<br>nodeValue:" + flag.nodeValue;
return _flag;
}
element = document.getElementById("intro");
//获取元素节点p
document.write("<p>元素节点p的节点属性:" + getProperty(element) + "</p>");
attribute = document.getElementById("intro").getAttributeNode("name");
//获取元素节点p的name属性
document.write("<p>属性节点name的节点属性:" + getProperty(attribute) + "</p>");
text = document.getElementById("intro").firstChild;
//获取元素节点的子节点
document.write("<p>文本节点的节点属性:" + getProperty(text) + "</p>");
</script>
</body>
</html>
3.节点操作
1.节点的添加
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>试一试</title>
<script type="text/javascript">
function addNode(){
var oH=document.createElement("h4"); //新建一个节点h4
oH.innerHTML="Dom节点";//给新建的节点写入文字
var oB=document.getElementById("intro"); //获取需要添加节点的位置
oB.insertBefore(oH,oB.firstChild); //把新建节点插入到body第一个子节点之前的位置
};
</script>
</head>
<body id="intro">
<p>hello dom</p>
<hr />
<input type="button" value="增加节点" onclick="addNode();" />
</body>
</html>
语法: .createElement(name)
参数: name:字符串值，这个字符串可为此元素节点规定名
称。
2)
语法: .insertBefore(newnode,existingnode)
参数: newnode:需要插入的节点对象。
existingnode:在之前插入新节点的子节点
2.节点的删除
关于节点的删除非常简单，调用removeChild0方法， 就可以删
除所选择的节点。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>试一试</title>
<script type="text/javascript">
function delNode(){
var oB=document.getElementById("intro"); //获取body标签
oB.removeChild(oB.firstChild);//删除body标签的第一个子节点
};
</script>
</head>
<body id="intro"><h4>Dom节点</h4>
<p>hello dom</p>
<hr />
<input type="button" value="删除节点" onclick="delNode();" />
</body>
</html>
语法: .removeChild(node)
参数:1
node:被删除的节点
3.节点的修改
节点的修改并不是直接将节点修改为另一个节点，而是先创建一
个新节点，然后用新节点替换需要修改的节点。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>试一试</title>
<script type="text/javascript">
function repNode() {
var oB = document.getElementById("intro");
var oH=document.createElement("h1");//新建一个节点h1
oH.innerHTML="Dom节点"; //给新建节点添加内容
oB.replaceChild(oH,oB.firstChild);//用新节点替换h4节点
}
</script>
</head>
<body id="intro"><h4>Dom节点</h4>
<p>hello dom</p>
<hr />
<input type="button" value="替换节点" onclick="repNode();" />
</body>
</html>
语法: .replaceChild(newnode,oldnode)
参数: newnode:希望插入的节点对象
oldnode:希望删除的节点对象
4.简单的事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件的触发</title>
<script type="text/javascript">
function on_Click() {
alert("你点击了按钮，通过onclick方法触发了click事件");
}
function on_Dblclick() {
alert("你双击了按钮，通过ondblclick方法触发了dblclick事件");
}
function on_Mousedown() {
alert("你按下了按钮，通过onmousedown方法触发了mousedown事件");
}
function on_Mouseup() {
alert("你按下鼠标并松开了，通过onmouseup方法触发了mouseup事件");
}
function on_Mouseover() {
alert("鼠标移动到了按钮，通过onmouseover方法触发了mouseover事件");
}
function on_Mouseout() {
alert("鼠标移出了按钮，通过onmouseout方法触发了mouseout事件");
}
function on_Keypress() {
alert("你按下按键了，通过onkeypress方法触发了keypress事件");
}
</script>
</head>
<body onkeypress="on_Keypress();">
<input type="button"value="单击鼠标触发事件"onclick="on_Click();"/>
<br />
<br />
<input type="button"value="双击鼠标触发事件"ondblclick="on_Dblclick();"/>
<br />
<br />
<input type="button"value="按下鼠标触发事件"onmousedown="on_Mousedown();"/>
<br />
<br />
<input type="button"value="按下鼠标松开时触发事件"onmouseup="on_Mouseup();"/>
<br />
<br />
<input type="button"
value="移动鼠标到按钮触发事件"onmouseover="on_Mouseover();"/>
<br />
<br />
<input type="button"value="移开鼠标触发事件"onmouseout="on_Mouseout();"/>
<br />
<br />
<input type="button"value="按下键盘按键触发事件"/>
</body>
</html>
