JavaScript（三）

发布日期：2022-02-01 14:28:08 浏览次数：41 分类：技术文章

本文共 1755 字，大约阅读时间需要 5 分钟。

JS HTML DOM

DOM简介

通过HTML DOM，可访问JavaScript HTML文档的所有元素。

当网页加载时，浏览器会创建页面的文档对象模型。

HTML DOM模型被构造为对象的树。

JavaScript能够改变页面中的所有HTML元素，属性，CSS样式，能够对页面中的所有时间做出反应。

JavaScript操作HTML元素，首先需要找到该元素。有三种方法：
- 通过id 找到HTML元素
- 通过标签名找到html元素
- 通过类名找到HTML元素

通过id查找html元素

var x=document.getElementById(“intro”)
找到：以对象形式返回该元素
找不到：x将包含null

通过标签名查找html元素

var x=document.getElementById(“main”)
var y=x.getElementsByTagName(“p”);

改变HTML

HTML DOM允许JavaScript改变HTML元素的内容

改变HTML输出流

改变HTML内容

document.getElementById(id).innerHTML=new HTML

Old Header

改变HTML属性

document.getElementById(id).attribute=new value

改变CSS

HTML DOM允许JavaScript改变HTML元素的样式。

document.getElementById(id).style.property=new style

Hello World!

My Heading 1

DOM事件

HTML DOM使JavaScript有能力对HTML事件做出反应

对事件做出反应，在事件发生时执行代码

οnclick=JavaScript
- 用户点击鼠标时
- 网页已加载时
- 图像已加载时
- 鼠标移动到元素时
- 提交HTML表单时
- 用户触发按键时

请点击该文本

HTML事件属性

点击这里

使用HTML DOM来分配事件

onload和onunload事件

onload和onunload在用户进入或离开页面时被触发
onload 和 onunload 事件可用于处理 cookie。
<body οnlοad=“checkCookies()”>

onchange事件

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

onmouseover和onmouseout事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM节点

添加和删除节点

创建新的html元素

var para=document.createElement("p") #创建新元素var node=document.createTextNode("这是新段落"); #创建新节点para.appendChild(node);var element=document.getElementById("div1");element.apppendChild(para):

删除已有的HTML元素

var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);

#找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：var child=document.getElementById("p1");child.parentNode.removeChild(child);

转载地址：https://blog.csdn.net/shunjianxaioshi/article/details/118753054 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：JavaScript（二）

下一篇：JavaScript（四）

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

JS HTML DOM

DOM简介

改变HTML

Old Header

改变CSS

My Heading 1

DOM事件

请点击该文本

DOM节点

发表评论

最新留言

关于作者

推荐文章