javascript HTML DOM

最新推荐文章于 2024-07-15 14:30:35 发布
最新推荐文章于 2024-07-15 14:30:35 发布
阅读量238 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript DOM

1.查找 HTML 元素

有三种方法找到HTML某个元素：

1)通过id找到 HTML 元素

var x=document.getElementById("intro");

2)通过标签名找到HTML元素

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<divid="main">

<p>TheDOM is very useful.</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

</div>

<script>

varx=document.getElementById("main");

vary=x.getElementsByTagName("p");   //获取到很多元素,需要选择使用哪个

document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

</body>

</html>

3)通过类名找到HTML元素

2.改变 HTML 属性

document.getElementById("image").src="landscape.jpg";

3.改变 HTML 样式

document.getElementById("p2").style.color="blue";

4.设置显示隐藏属性

       document.getElementById('p1').style.visibility='hidden'

5. HTML DOM 事件

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>  //文本改变为:谢谢

从事件处理器调用一个函数：

<!DOCTYPE html>

<html>

<head>

<script>

function changetext(id)

{

id.innerHTML="谢谢!";

}

</script>

</head>

<body>

<h1οnclick="changetext(this)">请点击该文本</h1>

</body>

</html>

6. 使用 HTML DOM 来分配事件

//为myBtn按钮添加了点击事件

<!DOCTYPE html>

<html>

<head>

</head>

<button id="myBtn">点击这里</button>

 

<script>

document.getElementById("myBtn").οnclick=function(){displayDate()};

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

 

<p id="demo"></p>

</body>

</html>

7. onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

 

<!DOCTYPE html>

<html>

<bodyοnlοad="checkCookies()">

 

<script>

function checkCookies()

{

if(navigator.cookieEnabled==true)

       {

       alert("已启用 cookie")

       }

else

       {

       alert("未启用 cookie")

       }

}

</script>

 

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>

</body>

</html>

8. onchange 事件

onchange 事件常结合对输入字段的验证来使用。下面的例子当用户改变输入字段的内容时，会调用 upperCase() 函数。

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

varx=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

 

请输入英文字符：<inputtype="text" id="fname" οnchange="myFunction()">

<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>

</html>

9. onmouseover 和 onmouseout 事件

<!DOCTYPE html>

<html>

<body>

 

<div οnmοuseοver="mOver(this)"οnmοuseοut="mOut(this)"style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

 

<script>

function mOver(obj)

{

obj.innerHTML="谢谢"

}

 

function mOut(obj)

{

obj.innerHTML="把鼠标移到上面"

}

</script>

 

</body>

</html>

10. onmousedown、onmouseup 以及 onclick 事件

<!DOCTYPE html>

<html>

<body>

 

<div οnmοusedοwn="mDown(this)"οnmοuseup="mUp(this)"style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

 

<script>

function mDown(obj)

{

obj.style.backgroundColor="#1ec5e5";

obj.innerHTML="请释放鼠标按钮"

}

 

function mUp(obj)

{

obj.style.backgroundColor="green";

obj.innerHTML="请按下鼠标按钮"

}

</script>

 

</body>

</html>

11. 创建新的 HTML 元素

<!DOCTYPE html>

<html>

<body>

 

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

 

varelement=document.getElementById("div1");

element.appendChild(para);

</script>

</body>

</html>

创建元素步骤:

这段代码创建新的 <p> 元素：

varpara=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

varnode=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

varelement=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

12. 删除已有的 HTML 元素

如需删除 HTML 元素，必须首先获得该元素的父元素：

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

varparent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

</body>

</html>

这是常用的解决方案：找到希望删除的子元素，然后使用其parentNode 属性来找到父元素：

varchild=document.getElementById("p1");

child.parentNode.removeChild(child);


伦博
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript HTML DOM
01-19
JavaScript HTML DOM 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为...
HTML DOM(一)
☆迷茫Dog的秘密基地☆
08-16 177
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.getElementB
自学javascript笔记_自用_解析W3school的代码_创建删除节点
ElegantIce的专栏
02-18 420
这是一个段落。 这是另一个段落。 var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para);
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
JavaScript HTML DOM 事件
01-21
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 实例 Mouse Over Me Click Me 对事件做出反应 我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。 如需...
JavaScript HTML DOM EventListener
01-19
JavaScript HTML DOM EventListener addEventListener() 方法 实例 在用户点击按钮时触发监听事件： document.getElementById(myBtn).addEventListener(click, displayDate); addEventListener() 方法用于向...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 389
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 182
vue 自定义滚动条同步拖动（移动端）
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 238
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 698
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 268
通过sm4对文件进行加解密，用户输入密码
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue单路由的独享守卫怎么设置
ggq53219的博客
07-13 170
在Vue.js中，特别是在使用Vue Router时，路由守卫（Route Guards）是一种强大的机制，允许我们在路由发生变化时执行一些逻辑，比如检查用户是否登录、加载数据等。Vue Router提供了全局守卫、路由独享守卫和组件内守卫三种类型的守卫。对于你的问题，关于如何设置“单路由的独享守卫”（即路由独享守卫），你可以通过给特定的路由配置。当尝试进入这个路由时，会首先调用这个守卫函数。如果检查未通过（即用户未登录），则调用。函数是一个假设的示例，你需要根据你的应用逻辑来实现它。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 491
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 169
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。
React:useState和useEffect
读万卷书 行万里路
07-12 467
最近因为想要开发一个简单的应用才开始接触React。但是并没有系统学习React，所以这篇博客可能会写的不够专业。
基于JAVA+SpringBoot+Vue+Echarts的充电数据大屏可视化分析
azhou的代码园
07-12 605
随着电动汽车的普及，城市中充电设施的需求日益增长。为了提高充电设施的管理效率和用户体验，本文提出了一个停车场充电桩数据可视化平台的设计与实现。该平台旨在集成、处理并展示来自多个充电桩的实时数据，帮助管理者进行有效监控和决策支持，同时为车主提供便捷、直观的充电信息查询服务。首先，本研究分析了现代停车场充电桩管理的业务需求，确定了平台的主要功能模块，包括管理员登录，数据源excel导入、数据清洗、大屏数据展示、以及不同维度数据分析图表展示等。
JavaScript 字符串中写变量，如 ${name}
qq_30049249的博客
07-15 106
https://andi.cn/page/621551.html
【JavaScript】聊一聊js中的浅拷贝与深拷贝与手写实现
最新发布
kfashfasf的博客
07-15 627
浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址。下面用一张图来解释一下浅拷贝深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性下面用一张图来解释一下深拷贝。
JavaScript课件-08.pptx
03-14
这份课件深入浅出地教授了JavaScript中的DOM节点理论，帮助学习者掌握如何在编程中有效地管理和操作HTML文档，这对于理解和实现复杂的网页功能，如响应式设计和用户交互，具有很强的实际指导意义。无论是初学者还是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值