实训第六天所学记录

最新推荐文章于 2024-01-25 23:58:18 发布

DoraMcree

最新推荐文章于 2024-01-25 23:58:18 发布

阅读量55

点赞数

本文链接：https://blog.csdn.net/DoraMcree/article/details/117695212

版权

对于JavaScript的进一步学习

焦点不离开输入框实时触发事件，onchange 、onblur 、onkeyup 、oninput 对比

文本框输入事件：onchange 、onblur 、onkeyup 、oninput、

onchange
在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发

onblur
不管值是否变化，都触发

onkeyup
输入框内容发生变化即可触发，但是无法检测复制粘贴

oninput
输入框内容发生变化即可触发

HTML DOM 介绍

HTML DOM（ Document Object Model ），即文档对象模型

HTML DOM 定义了访问和操作 HTML 文档的标准方法(接口)

HTML DOM 以树状结构表达 HTML 文档

HTML DOM 节点

整个 HTML 文档是一个文档节点

每个 HTML 元素是元素节点

每个 HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

#注释是注释节点

HTML DOM 节点层级关系

根结点：最顶端结点称为根结点，其没有父节点，如：

父节点：其可以拥有子节点，如：

子节点：父节点下一级的节点

同胞节点：拥有相同父节点的同级节点，如：与

是根节点，没有父节点有两个子节点有两个子节点有两个了节点<h2><p> 与拥有相同的父节点，是同级节点 <h2>与<p> 也是同级节点，其共同的父节点为 <h2> 是的首个子节点 <p> 是的最后一个子节点 </p></h2></p></h2></p></h2>

<html> 
    <head>    
         <meta charset="utf-8">
    <title>ShiXun</title>
  </head>  
    <body>    
        <h2>实训在线</h2>    
        <p>Hello Web!</p>  
    </body>
</html>

JavaScript 访问 DOM 元素

document.getElementById() 方法

document.getElementsByName() 方法

document.getElementsByTagName() 方法

document.getElementsByClassName() 方法

JavaScript 修改 DOM 元素

修改 HTML 元素内容

修改 CSS 样式

修改 HTML 元素属性

增加或删除 HTML 元素

<h1 id="title">JS访问DOM</h1>
        
<script type="text/javascript">    

//获取 id="title" 的元素，并修改其内容    document.getElementById("title").innerHTML = "Hello";    

</script>

<h1 id="title">JS访问DOM</h1>    

<script type="text/javascript">
   //获取 id="title" 的元素        
    var title = document.getElementById("title");     
   
    //修改其颜色        
    title.style.color = "red";        

    //修改其字体大小        
    title.style.fontSize = "46px";    
</script>

DoraMcree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实训第六天所学记录

对于JavaScript的进一步学习焦点不离开输入框实时触发事件，onchange 、onblur 、onkeyup 、oninput 对比文本框输入事件：onchange 、onblur 、onkeyup 、oninput、onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发onblur不管值是否变化，都触发onkeyup输入框内容发生变化即可触发，但是无法检测复制
复制链接

扫一扫