DOM的简单使用

最新推荐文章于 2022-10-24 20:43:58 发布

caoxu1987728

最新推荐文章于 2022-10-24 20:43:58 发布

阅读量493

点赞数

本文链接：https://blog.csdn.net/caoxu1987728/article/details/2694120

版权

Web Develop 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

访问指定节点：

getElementsByName():

 
 
 
 
<html>
<head>
<title>DOM技术</title>
</head>
<body>
<form method="post" action="document.cgi">
<fieldset>
<legend>选择你喜欢的颜色！</legend>
<input type="radio" name="color" value="red"/>red<br/>
<input type="radio" name="color" value="green"/>green<br/>
<input type="radio" name="color" value="blue"/>blue<br/>
</fieldset>
<input type="submit" value="submit">
</form>
<script language="javascript">
var oRadios=document.getElementsByName("color");
alert(oRadios[0].getAttribute("value")); 
</script>
</body>
</html>

getElementById():

<html>
<head>
<title>
</title>
<script type="text/javascript">
function getValue(){
	var odiv1=document.getElementById("div1");
	odiv1.innerText="hello!";
}
</script>
</head>
<body οnlοad="getValue()">
<div id="div1"></div>
</body>
</html>

createElement():

<html>
<head>
<title>创建节点</title>
</head>
<body οnlοad="createM()">
</body>
</html>
<script language="javascript">
function createM(){
var op=document.createElement("p"); 
var otext=document.createTextNode("你好！");   
op.appendChild(otext); 
document.body.appendChild(op); 
}
</script>

removeChild():

<html>
<head>
<title>删除节点</title>
<script language="javascript">
function removeM(){
var op=document.body.getElementsByTagName("p")[0];
document.body.removeChild(op);
}
</script>
</head>
<body οnlοad="removeM()">
<p>你好！</p>
<p>hello world！</p>
</body>
</html>

replaceChild():

<html>
<head>
<title>替换节点</title>
<script language="javascript">
function appendM(){
var newP=document.createElement("p");
var newText=document.createTextNode("hello sansan!");
newP.appendChild(newText);
document.body.appendChild(newP);
}
</script>
</head>
<body οnlοad="appendM()">
<p>你好！</p>
<p>hello world！</p>
</body>
</html>

insertBefore():

<html>
<head>
<title>新消息出现在旧消息之前</title>
<script language="javascript">
function appendM(){
var newP=document.createElement("p");
var newText=document.createTextNode("hello sansan!");
newP.appendChild(newText);
var oldP=document.getElementsByTagName("p")[0];
document.body.insertBefore(newP,oldP);
}
</script>
</head>
<body οnlοad="appendM()">
<p>你好！</p>
<p>hello world！</p>
</body>
</html>

createDocumentFragment():

原方法：

<html>
<head>
<title>原方法</title>
<script language="javascript">
function oldM(){
var arrText=["first","second","third","fourth","fifth",
"sixth","seventh","eighth","ninth","tenth"];
for(var i=0;i<arrText.length;i++){
var op=document.createElement("p");
var otext=document.createTextNode(arrText[i]);
op.appendChild(otext);
document.body.appendChild(op);
}
}
</script>
</head>
<body οnlοad="oldM()">
</body>
</html>

现方法：

<html>
<head>
<title>原方法</title>
<script language="javascript">
function oldM(){
var arrText=["first","second","third","fourth","fifth",
"sixth","seventh","eighth","ninth","tenth"];
Var oFragment=document.createDocumentfragment()//创建文档碎片
for(var i=0;i<arrText.length;i++){
var op=document.createElement("p");
var otext=document.createTextNode(arrText[i]);
op.appendChild(otext);
oFragment.appendChild(op)
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body οnlοad="oldM()">
</body>
</html>

innerText/innerHTML：

<html>
<head>
<title>
</title>
<script type="text/javascript">
function getBackgroundColor(){
var odiv1=document.getElementById("div1");
//odiv1.innerText="<h1>new word </h1>";

odiv1.innerHTML="<h1>new word </h1>";
}
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="getValue" onClick="getBackgroundColor()">
</body>
</html>

div相当于一个容器，通过innerText或innerHTML向其中嵌入网页内容

caoxu1987728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的简单使用

访问指定节点：getElementsByName(): DOM技术选择你喜欢的颜色！redgreenbluevar oRadios=document.getElementsByName("color");alert(oRadios[0].getAttribute("value")); getElem
复制链接

扫一扫