<html>
<head>
<title>DOM技术</title>
</head>
<body>
<form method="post" action="document.cgi">
<fieldset>
<legend>选择你喜欢的颜色！</legend>
<input type="radio" name="color" value="red"/>red
<input type="radio" name="color" value="green"/>green
<input type="radio" name="color" value="blue"/>blue
</fieldset>
<input type="submit" value="submit">
</form>
<script language="javascript">
var oRadios=document.getElementsByName("color");
alert(oRadios[0].getAttribute("value"));
</script>
</body>
</html>
<html>
<head>
<title>DOM技术</title>
</head>
<body>
<form method="post" action="document.cgi">
<fieldset>
<legend>选择你喜欢的颜色！</legend>
<input type="radio" name="color" value="red"/>red
<input type="radio" name="color" value="green"/>green
<input type="radio" name="color" value="blue"/>blue
</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 onload="getValue()">
<div id="div1"></div>
</body>
</html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function getValue(){
var odiv1=document.getElementById("div1");
odiv1.innerText="hello!";
}
</script>
</head>
<body onload="getValue()">
<div id="div1"></div>
</body>
</html>createElement():
<html>
<head>
<title>创建节点</title>
</head>
<body onload="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>
<html>
<head>
<title>创建节点</title>
</head>
<body onload="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 onload="removeM()">
<p>你好！</p>
<p>hello world！</p>
</body>
</html>
<html>
<head>
<title>删除节点</title>
<script language="javascript">
function removeM(){
var op=document.body.getElementsByTagName("p")[0];
document.body.removeChild(op);
}
</script>
</head>
<body onload="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 onload="appendM()">
<p>你好！</p>
<p>hello world！</p>
</body>
</html>
<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 onload="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 onload="appendM()">
<p>你好！</p>
<p>hello world！</p>
</body>
</html>
<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 onload="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 onload="oldM()">
</body>
</html>
<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 onload="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 onload="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 onload="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>
<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向其中嵌入网页内容
Copyright © 2019- hyl365.com 版权所有
违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务