目录
DOM 👉Document Object Model( 文档对象模型 )
把所有的html(元素,属性,内容)都节点化
<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script>
function p(s){
document.write(s+"<br>");
}
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
</html>
效果图
一.获取节点
| attributes | 获取属性节点 |
| childNodes | 获取内容节点 |
| document.getElementById | 通过id获取元素节点 |
| getElementsByTagName | 通过标签名称获取元素节点 |
| getElementsByClassName | 通过类名获取元素节点 |
| getElementsByName | 通过表单元素的name获取元素节点 |
<html>
<h1 class="d" >hello javascript h1 classD</h1>
<h2 class="d" >hello BOM h2 classD</h2>
<div class="d" >hello DOM div classD</div>
<div id="a" >hello DOM div idA</div>
<div id="b" >hello DOM div idB</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
var elements= document.getElementsByClassName("d");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
document.write("<br>");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
获取属性节点
下面的例子中,as表示所有的属性，as["id"]取出名称是id的属性
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var as = document.getElementById("d1").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>
</html>
首先获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点(下标为0)，就是其内容节点, 然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var content = document.getElementById("d1").childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</html>
二.DOM 事件
1️⃣分类
| onfocus onblur | 1.焦点事件 |
| onmousedown onmouseup onmousemove onmouseout | 2.鼠标事件 |
| onkeydown onkeypress onkeyup | 3.键盘事件 |
| onclick ondblclick | 4.点击事件 |
| onchange | 5.变化事件 |
| onsubmit | 6.提交事件 |
| onload | 7.加载事件 |
| this | 8.当前组件 |
| return false | 9.阻止事件的发生 |
2️⃣示例
☀焦点事件
<input type="text" onfocus="get()" onblur="lose()" id="input1" placeHolder="输入框1" >
<br>
<div id="message"></div>
<script>
function get(){
document.getElementById("message").innerHTML="输入框获取了焦点";
}
function lose(){
document.getElementById("message").innerHTML="输入框丢失了焦点";
}
</script>
☀鼠标事件
<input type="button" onmousedown="down()" onmouseup="up()" value="演示按下和弹起" >
<span id='down_or_up'></span>
<br>
<br>
<input type="button" onmousemove="move()" value="演示鼠标经过" >
<span id='move_by'></span>
<br>
<br>
<input type="button" onmouseover="over()" value="演示鼠标进入" >
<span id='in'></span>
<br>
<br>
<input type="button" onmouseout="out()" value="演示鼠标退出" >
<span id='out'></span>
<br>
<br>
<script>
var number = 0;
function down(){
document.getElementById("down_or_up").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("down_or_up").innerHTML="弹起了鼠标";
}
function move(){
document.getElementById("move_by").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("in").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("out").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>
☀提交事件
<form action="***.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="文档(body)加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" width="100px" src="https://c-ssl.duitang.com/uploads/item/201909/08/20190908132650_qsdod.thumb.1000_0.jpeg"/>
<span></span>
☀当前组件
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
<input type="button" onclick="singleClick(this)" value="按钮1" >
<input type="button" onclick="singleClick(this)" value="按钮2" >
<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 id="password" type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
var name = document.getElementById("name");
var ps = document.getElementById("password");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}else if(password.value.length==0){
alert("密码不能为空");
return false;
}
return true;
}
</script>
三.节点关系 (待完善)
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
