HTML DOM(一)

目录

 一.获取节点

 获取属性节点

二.DOM 事件

1️⃣分类

2️⃣示例

☀焦点事件

​​

☀鼠标事件

☀键盘事件

​ ​ 

☀点击事件

​​

☀提交事件

​

☀加载事件

​

☀当前组件

​

☀阻止事件的发生

三.节点关系 (待完善)

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>

三.节点关系 (待完善)

posted @ 2021-08-16 23:22  泥烟  阅读(20)  评论(0)  编辑  收藏  举报