javascript中的dom

     2022-03-21     212

关键词:

通过 HTML DOM(文档对象模型),可访问 JavaScript HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。
。。。。。。。。。。
查找 HTML 元素:
通常,通过 JavaScript,您需要操作 HTML 元素。
http://www.iis7.com/b/wzjk/
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素。 getElementById,查找元素。
通过标签名找到 HTML 元素。getElementsByTagName,查找元素中的子元素。
通过类名找到 HTML 元素。 getElementsByClassName,查找类名为class定义的元素。
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。如果找到该元素,则该方法将以对象的形式返回该元素,如果未找到该元素,则 # 将包含 null。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JavaScript HTML DOM - 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
在 JavaScript 中,document.write():可用于直接向 HTML 输出流写内容,绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
改变 HTML 内容:
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:document.getElementById(id).innerHTML=新的 HTML。
改变 HTML 属性:
如需改变 HTML 元素的属性,请使用这个语法:document.getElementById(id).attribute=新属性值。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式(style):
如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style(样式).property(属性)=新样式。
。。。。。。。。。。
使用事件:HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件:
元素被点击。
页面加载完成。
输入框被修改。
。。。。。。。。。。。。。。。
JavaScript HTML DOM 事件:
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应:
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
onclick=JavaScript。
HTML 事件的例子:
当用户点击鼠标时。
当网页已加载时。
当图像已加载时。
当鼠标移动到元素上时。
当输入字段被改变时。
当提交 HTML 表单时。
当用户触发按键时。
。。。。。。。。。。。。。。
onload 和 onunload 事件:
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件:onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件:onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件:
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
onfocus:当输入字段获得焦点时,改变其背景色。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JavaScript HTML DOM EventListener(事件监听器)
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
语法:element.addEventListener(event, function, useCapture)。
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。
当传递参数值时,使用"匿名函数"调用带参数的函数。
事件冒泡或事件捕获?:
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 "冒泡" 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 "捕获" 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
removeEventListener() 方法:removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。

JavaScript HTML DOM 元素(节点)
创建新的 HTML 元素:如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

HTML DOM 教程
在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素

javascript中的dom

通过HTMLDOM(文档对象模型),可访问JavaScriptHTML文档的所有元素。当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)。通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。JavaScript能够改变页面... 查看详情

使用 Javascript 访问 iFrame 中的 DOM

】使用Javascript访问iFrame中的DOM【英文标题】:AccessDOMinsideiFrameusingJavascript【发布时间】:2021-01-3017:49:03【问题描述】:我正在尝试从我的主页访问DOM元素并想要更新CSS。我使用以下内容;varmyIframeContainerEl=$(\'#myIframeContainerEl\');my... 查看详情

减少 Javascript 中的 DOM 搜索频率

】减少Javascript中的DOM搜索频率【英文标题】:ReducetheDOMsearchfrequencyinJavascript【发布时间】:2018-04-1217:16:08【问题描述】:我正在从一个小项目中摆脱Jquery并使用vanillajs重新编写脚本。在当前代码中,有一个jquery实现来搜索DOM元... 查看详情

JavaScript 中的 DOM 解析

】JavaScript中的DOM解析【英文标题】:DOMparsinginJavaScript【发布时间】:2012-08-1114:38:24【问题描述】:一些背景:我正在使用JavaScript开发基于Web的移动应用程序。HTML渲染是基于Safari的。跨域策略已禁用,因此我可以使用XmlHttpRequest... 查看详情

javascript中的dom介绍

一、基础知识点1、DOM是文档对象模型,是针对HTML和XML文档的一个API(应用程序接口)2、DOM描绘了一个层次化的节点数,允许开发人员进行添加,移除个修改等操作3、IE浏览器中所有的DOM对象都是以COM对象形式实现的,因此出现... 查看详情

Javascript 是不是可以复制 DOM 中的元素? [复制]

】Javascript是不是可以复制DOM中的元素?[复制]【英文标题】:IsitpossibleforJavascripttoduplicateanelementintheDOM?[duplicate]Javascript是否可以复制DOM中的元素?[复制]【发布时间】:2011-10-1415:35:43【问题描述】:我有一个从PHP查询数据库创建... 查看详情

javascript中的获取dom节点

主要有:document.getElementById,getElementsByClassName,getElementsByTagName,getElementsByName 函数名写法:getElementsByClassName、getElementsByTagName是elements!!!带s!!!getElementById才没有s~~返回值:getElementById返 查看详情

javascript删除和替换dom中的元素(代码片段)

查看详情

javascript中this与dom中的注意

对于下面这段代码:<scripttype=‘text/javascript‘>functiontestThis(){console.log(this);}</script><inputtype=‘button‘id="testBtn"/>第一种绑定事件的方式:document.getElementById(‘testBtn‘).addEventListener( 查看详情

javascript-选择器dom

...型被构造为对象的树。HTMLDOM树通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。JavaScript能够改变页面中的所有HTML元素JavaScript能够改变页面中的所有HTML属性JavaScript能够改变页面中的所有CS 查看详情

javascript中的dom,bom详细介绍;

...BOM:浏览器对象模型,与浏览器交互的方法和接口; JavaScript事件定义及其三要素 事件:发生在页面中的可以被JavaScript侦测到的交互行为; 在事件触发时JavaScri 查看详情

javascript的dom和bom

通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。JavaScript能够改变页面中的所有HTML元素JavaScript能够改变页面中的所有HTML属性JavaScript能够改变页面中的所有CSS样式JavaScript能够对页面中的所有事件做出反应为... 查看详情

javascript列出dom树中的所有id(代码片段)

查看详情

javascript元素在dom树中的绝对位置(代码片段)

查看详情

如何使用 javascript 中的 mouseover 事件删除我在 javascript 中创建的 DOM 节点?

】如何使用javascript中的mouseover事件删除我在javascript中创建的DOM节点?【英文标题】:HowdoIremoveDOMnodesthatIcreatedinjavascriptusingmouseovereventsinjavascript?【发布时间】:2019-04-0707:00:00【问题描述】:因此,HTML显示了一个区域,其中随机... 查看详情

javascript中的dom实现显示鼠标的空间位置

为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event。这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发奇想。那我可不能够通过DOM中的c... 查看详情

纯 Javascript - 查找/替换 DOM 中的单词列表

】纯Javascript-查找/替换DOM中的单词列表【英文标题】:PureJavascript-Find/ReplacealistofwordsinDOM【发布时间】:2016-12-2204:25:36【问题描述】:我有一个单词列表,我想在DOM中替换它们。替换工作正常,但有问题。在被替换的文本之前和... 查看详情

html学习笔记javascript(dom)

一DOM简介通过HTMLDOM可以访问JavaScript文档的所有元素当网页被加载的时候,浏览器会创建页面的文档对象模型HTMLDOM模型被构造成对象的树HTMLDOM树通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。JavaScript能够... 查看详情