查找 HTML 元素的方式方法有哪些
原创
查找 HTML 元素的方式方法有哪些
原创
用户7718188
修改于 2021-10-08 15:11:11
修改于 2021-10-08 15:11:11
代码可运行
运行总次数：0
代码可运行
通过 id 找到 HTML 元素
var x=document.getElementById("intro");- 通过标签名找到 HTML 元素
//查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");- 通过name找到 HTML 元素
var x=document.getElementsByName("intro");改变 HTML 元素的内容
- 改变 HTML 输出流 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。但绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
- 改变 HTML 内容
document.getElementById(id).innerHTML=new HTML- 改变 HTML 属性
document.getElementById(id).attribute=new value- 改变 CSS
document.getElementById(id).style.property=new style或者
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>DOM 事件
- 用户点击鼠标事件
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html><script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>- onload 和 onunload 事件 onload 和 onunload 事件会在用户进入或离开页面时被触发。 onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。 onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("已启用 cookie")
}
else
{
alert("未启用 cookie")
}
}
</script>
<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
</body>
</html>- onchange 事件 onchange 事件常结合对输入字段的验证来使用。
<input type="text" id="fname" onchange="upperCase()">- onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
