看程序学js-5 DOM
程序员文章站
2024-03-19 22:40:28
...
1、节点的概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
</body>
</html>
2、获取节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
</script>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</body>
</html>
3、节点的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
<script>
function changeDiv1(){
document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>
<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>
<script>
function get(){
var input1 = document.getElementById("input1");
var s = "id="+input1.id + "<br>";
s += "value="+input1.value + "<br>";
s += "class="+input1.className + "<br>";
s += "test="+input1.getAttribute("test")+ "<br>";
s += "test="+input1.attributes["test"].nodeValue+ "<br>";
document.getElementById("d1").innerHTML= s;
}
</script>
<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>
<div style="height:30px"></div>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name">
<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</body>
</html>
4、DOM样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button onclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table id="t">
<tr >
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr >
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr >
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr >
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr >
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
<script>
var trs = document.getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
if(1==i%2)
trs[i].style.backgroundColor='#f8f8f8';
}
</script>
</body>
</html>
5、DOM事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
</script>
<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<br>
<br>
<input type="button" onmousemove="move()" value="用于演示鼠标经过" >
<br>
<br>
<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<br>
<br>
<input type="button" onmouseout="out()" value="用于演示鼠标退出" >
<br>
<br>
<div id="message"></div>
<script>
var number = 0;
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
</script>
“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" onkeydown="down(event)" value="用于演示按下keydown" >
<br>
<br>
<input type="button" onkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
<input type="button" onkeyup="up()" value="用于演示弹起" >
<br>
<br>
<div id="message">
</div>
<script>
var number =0;
function down(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
</script>
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
<input type="text" id="t1" onchange="change()" value="" >
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
</script>
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
<script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" src="http://how2j.cn/example.gif"/>
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
</script>
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
position: absolute;
left: 80px;
top: 20px;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<a href="#nowhere"> 武器 </a>
<a href="#nowhere"> 护甲 </a>
<a href="#nowhere"> 英雄 </a>
<div class="menu">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
</body>
</html>
6、节点关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
var node = null;
function showParent(){
if(null==node)
node = document.getElementById("d1");
if(document == node)
alert("已是根节点:document");
else{
alert(node.parentNode);
node = node.parentNode;
}
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showParent()">不断递归d1的父节点</button>
<script>
function showPre(){
var d2 = document.getElementById("d2");
alert(d2.previousSibling.innerHTML);
}
function showNext(){
var d2 = document.getElementById("d2");
alert(d2.nextSibling.nodeName);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div><div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showPre()">获取d2的前一个同胞</button>
<button onclick="showNext()">获取d2的后一个同胞</button>
<script>
function showfirst(){
var div = document.getElementById("parentDiv");
alert(div.firstChild.nodeName);
}
function showlast(){
var div = document.getElementById("parentDiv");
alert(div.lastChild.nodeName);
}
function showall(){
var div = document.getElementById("parentDiv");
alert(div.childNodes.length);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showfirst()">第一个子节点</button>
<button onclick="showlast()">最后一个子节点</button>
<button onclick="showall()">所有子节点数量</button>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showNumber1()">通过childNodes获取子节点总数</button>
<button onclick="showNumber2()">通过children()获取子节点总数</button>
<script>
function showNumber1(){
alert(document.getElementById("parentDiv").childNodes.length);
}
function showNumber2(){
alert(document.getElementById("parentDiv").children.length);
}
</script>
</body>
</html>
7、创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
var hr=document.createElement("hr");
var div1 = document.getElementById("d");
div1.appendChild(hr);
}
</script>
<button onclick="add()">在div中追加一个hr元素</button>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
var p=document.createElement("p");
var text = document.createTextNode("这是通过DOM创建出来的<p>");
p.appendChild(text);
var div1 = document.getElementById("d");
div1.appendChild(p);
}
</script>
<button onclick="add()">在div中追加一个p元素</button>
<div id="d">Hello HTML DOM<br></div>
<script>
function add(){
var a=document.createElement("a");
var content = document.createTextNode("http://12306.com");
a.appendChild(content);
var href = document.createAttribute("href");
href.nodeValue="http://12306.com";
a.setAttributeNode(href);
var div1 = document.getElementById("d");
div1.appendChild(a);
}
</script>
<button onclick="add()">在div中追加一个超链</button>
</body>
</html>
8、删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function removeDiv(){
var parentDiv = document.getElementById("parentDiv");
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);
}
</script>
<div id="parentDiv">
<div id="div1">安全的div</div>
<div id="div2">即将被删除的div</div>
</div>
<button onclick="removeDiv()">删除第二个div</button>
<script>
function removeHref(){
var link= document.getElementById("link");
link.removeAttribute("href");
}
</script>
<a id="link" href="http://12306.com">http://12306.com</a>
<br>
<button onclick="removeHref()">删除超链的href属性</button>
<script>
function removeDiv1(){
var parentDiv = document.getElementById("parentDiv");
var textNode = parentDiv.childNodes[0];
parentDiv.removeChild(textNode);
}
function removeDiv2(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="";
}
function recover(){
var parentDiv = document.getElementById("parentDiv");
parentDiv.innerHTML="这里是文本 ";
}
</script>
<style>
button{
display:block;
}
</style>
<div id="parentDiv">
这里是文本
</div>
<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>
</body>
</html>
9、替换节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function replaceDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var d3 = document.getElementById("d3");
var parentDiv = document.getElementById("parentDiv");
parentDiv.replaceChild(d4,d3);
}
</script>
<button onclick="replaceDiv()">替换第3个div</button>
</body>
</html>
10、插入节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function appendDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
parentDiv.appendChild(d4);
}
</script>
<button onclick="appendDiv()">追加第4个div</button>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function insertDiv(){
var d25= document.createElement("div");
var text = document.createTextNode("第二点五个div");
d25.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
var d3 = document.getElementById("d3");
parentDiv.insertBefore(d25,d3);
}
</script>
<button onclick="insertDiv()">在第二和第三之间，插入第二点五个div</button>
<script>
function loadJS(){
var newScript = document.createElement('script');
newScript.src = 'http://how2j.cn/study/test3041.js';
var firstScript = document.getElementsByTagName("script")[0];
firstScript.parentNode.insertBefore(newScript,firstScript);
}
</script>
<button onclick="loadJS()">test3041.js</button>
</body>
</html>
上一篇： 实现通用轮播图插件