JS中DOM元素有哪些

发布时间:2021-10-19 09:45:51 作者:小新
来源:亿速云 阅读:157

小编给大家分享一下JS中DOM元素有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

DOM  文档对象模型
js有如下功能
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

(JS只能操作行内样式,不能操作内嵌样式和外部样式)
如何查找HTML元素

1:var x=document.getElementById("a");
通过ID查找元素,如果找到ID="a"的元素,就以对象x的形式返回,如果没有找到,则x为null
2:通过标签名查找元素
var x=document.getElementsByTagName("")[]
3:通过class类元素名称查找元素
var x=document.getElementsByClassName("");
4:getElementsByName() 方法可返回带有指定name的对象的集合。
5
var element = document.querySelector(selectors)
返回文档中匹配指定的选择器所匹配到。其中:

selectors是一个字符串,包含一个或是多个 CSS 选择器,多个以逗号分隔
element,返回值是一个element对象(DOM元素)。当没有返回值时,则返回null

6:
var elementList = document.querySelectorAll(selectors);
selectors是一个字符串,包含一个或是多个 CSS 选择器,多个以逗号分隔
elementList,返回值是一个NodeList元素列表。

属性操作
getAttribute:语法:元素节点.getAttribute(元素属性名),功能获取元素节点中指定属性属性值
setAttribute:语法:元素节点.setAttribute(元素属性名),功能创建或者改变元素节点的属性
removeAttribute:语法:removeAttribute(元素属性名),功能删除元素中指定元素
DOM改变HTML元素
document.write直接向HTML输出内容
改变HTML内容  innerHTML ,innertext。二者区别innerHTML可以解析标签,而innertext不能,如果所选节点内部有标签就会直接将其输出
DOM事件(添加方式,可以直接添加到行内事件,还可以用事件处理器调用一个函数)
当用户点击鼠标时  onclick'
onchange 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发,onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
监听事件:
例如点击按钮时候触动:
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。

冒泡和捕获
在div中插入p元素,给p元素一个点击事件,如果是冒泡,会从内部向外触发,先触发p元素,然后再触发div元素
如果是捕获,就会先触发外部元素,然后再触发内部元素。点击p就会先触发div再触发p元素
默认值为false时,就会触发冒泡事件 默认值为true时,会触发捕获事件

以上是“JS中DOM元素有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. JS之DOM那些事
  2. JS中Dom的相关知识示例

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js dom

上一篇:怎么用Python查wifi密码

下一篇:Python七月超有用的十大开源代码是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》