HTML DOM(一)

news/2024/7/19 13:55:49 标签: dom, html, js, javascript
htmledit_views">

目录

 一.获取节点

 获取属性节点

二.DOM 事件

1️⃣分类

2️⃣示例

☀焦点事件

​​

☀鼠标事件

☀键盘事件

​ ​ 

☀点击事件

​​

☀提交事件

​

☀加载事件

​

☀当前组件

​

☀阻止事件的发生

三.节点关系 (待完善)

DOM  👉Document Object Model( 文档对象模型 )

把所有的html(元素,属性,内容)都节点化

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"><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"><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"><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️⃣示例

☀焦点事件

html"><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>

☀鼠标事件

html"><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>

 

☀键盘事件

html">“要先用鼠标选中该组件，然后敲击键盘”
<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>

  

☀点击事件

html"><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>

☀提交事件

html"><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>

☀加载事件

html"><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表示触发事件的组件，可以在调用函数的时候，作为参数传进去

html"><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>

☀阻止事件的发生

html"><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>

三.节点关系 (待完善)


http://www.niftyadmin.cn/n/816842.html

相关文章

[转载]如何优雅的处理边界条件？一定要数据有序时才能使用二分法吗？

[转载]如何优雅的处理边界条件？一定要数据有序时才能使用二分法吗？

基础算法一&#xff1a;二分法&#xff0c;你思考过这些问题吗&#xff1f; (qq.com) 转自公众号:猿六学算法
阅读更多...
[Acwing Linux基础课]第一讲 常用文件管理命令

[Acwing Linux基础课]第一讲 常用文件管理命令

结合y总的课程,做一丢丢笔记hhh ctrl c:取消命令&#xff0c;并且换行 ctrl u:清空本行命令 tab键:可以补全命令和文件名&#xff0c;如果补全不了快速按两下tab键&#xff0c;可以显示备选选项 ls:列出当前目录下所有文件&#xff0c;蓝色的是文件夹&#xff0c;白色的…
阅读更多...
2021-08-19 AcWing 3809. 修改数组

2021-08-19 AcWing 3809. 修改数组

输入样例&#xff1a; 2 3 10 1 4 5 1 1 2 2 3输出样例&#xff1a; 3 7 2 0 巧用所给的数据范围,从1-100遍历判断即可 #include <iostream> #include <limits.h>using namespace std;int a[1010]; int main() {int t;cin >> t;while(t--) {int n;cin &g…
阅读更多...
2021-08-20 AcWing 3810. 最长连续休息时间

2021-08-20 AcWing 3810. 最长连续休息时间

输入样例&#xff1a; 4 5 1 0 1 0 1 6 0 1 0 1 1 0 7 1 0 1 1 1 0 1 3 0 0 0输出样例&#xff1a; 2 2 3 0#include <iostream> #include <vector> #include <algorithm> using namespace std;const int N 400010; vector<int> a(N); int main() {…
阅读更多...
2021-08-21 AcWing第13场周赛 3812. 机器人走迷宫

2021-08-21 AcWing第13场周赛 3812. 机器人走迷宫

暴力全排列 输入样例&#xff1a; 2 5 6 .....# S....# .#.... .#.... ...E.. 333300012 6 6 ...... ...... ..SE.. ...... ...... ...... 01232123212302123021输出样例&#xff1a; 1 14#include <iostream> #include <cstring> #include <algorithm> #i…
阅读更多...
[牛客前缀和练习] A.智乃酱的区间乘积

[牛客前缀和练习] A.智乃酱的区间乘积

链接&#xff1a;https://ac.nowcoder.com/acm/contest/19483/A 来源&#xff1a;牛客网 输入 5 3 5 2 3 10 6 1 5 2 3 2 5 输出 1800 6 360#include <iostream> #include <cstring> #include <algorithm>using namespace std; typedef long long LL; con…
阅读更多...
第八周例行报告

第八周例行报告

此作业要求参见&#xff1a;https://edu.cnblogs.com/campus/nenu/2018fall/homework/2326 1、本周PSP 类型 任务 开始时间 结束时间 中断时间 Delta时间 会议 事后诸葛亮会议 11.3 14&#xff1a;12 11.3 15&#xff1a;08 0min 56min 博客 总结博客《事后诸葛…
阅读更多...
递归快速幂与非递归快速幂模板

递归快速幂与非递归快速幂模板

递归快速幂 (对大素数取模) typedef long long ll; ll Quick_pow(ll a,int n) {if(n 0)return 1;//出口为"a^01"else if(n % 2 1)return Quick_pow(a, n-1)*a;else{ll temp Quick_pow(a, n/2);return temp*temp;} } 虽然简洁&#xff0c;但会产生额外的空间开…
阅读更多...
最新文章

Copyright @ 2022~2023