JavaScript获取元素与绑定事件onclick事件

2024-06-16 12:52:40

获取元素的方法：

1、window.document.getElementById(id字符串)

通过id名称获取，window可以不写，只能得到页面中带有指定ID的第一个元素

2、document.getElementsByClassName(class名)

通过class名称获取指定元素，获得的是一个元素集合并非一个元素，因此不能直接操作，需要将元素重集合中取出来在操作,取元素需要索引或下标来取，集合中的第一个元素对应索引是0

3、document.getElementsByTagName(标签名)

通过标签名获取指定元素，得到的也是一个元素集合

4、getElementsByName()

获取指定name属性值的元素

5、querySelector() querySelectorAll()

获取到符合选择器要求的第一个元素，如果想要获取所有的使用 querySelectorAll()

注：querySelector在IE8以前不兼容；

getElement系列与querySelector系列比较

1、query系列存在IE上的兼容，IE8以前不支持
2、query需要的是选择器字符串，比get方便灵活
3、querySelectorAll获得是静态的元素集合，getElementsByTagName获得是动态的元素集合

事件绑定:onclick点击事件

item1.onclick=function(){// 编写点击后需要触发操作的代码alert("点击了");// document.write("<img src='./img/66.png'>");
}
//鼠标移入和鼠标移除事件
wrap.onmouseover=function(){console.log("鼠标移入");
}
wrap.onmouseout=function(){console.log("鼠标移出");
}

通过JS代码来设置元素的CSS属性，带连字符的CSS属性在JS中统统使用驼峰省略连字符

item1.style.width="100px";
   item1.style.height="100px";
   item1.style.color="red";
   item1.style.border="1px solid blue";

JavaScript获取元素与绑定事件onclick事件相关推荐

按钮绑定点击事件-onClick事件
按钮绑定点击事件-onClick事件 <button type="submit" id="btn">btn</button> 1. 第一 ...
JS一个元素怎么绑定多个事件
有时候一个一个元素要绑定多个事件,其实是分开写先看这个例子,我们预期它先执行alert1,然后是alert2,但事实上是没有alert1,因为覆盖了 <!DOCTYPE html> &l ...
JavaScript获取元素的样式
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术: JS 作者:黎耀杰 ...
详细解析 JavaScript 获取元素的坐标
随时随地技术实战干货,获取项目源码.学习资料,请关注源代码社区公众号(ydmsq666) from:https://www.cnblogs.com/dong-xu/p/7150715.html?utm ...
html 获取页面元素高度,浅谈JavaScript获取元素的大小（高度和宽度）的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
JavaScript 获取元素及事件
使用ID获取元素对象 document.getElementById( "ID" );:返回文档中一个指定ID的元素对象,用于精确获取:若找到则返回该元素对象,否则返回null 获 ...
JavaScript获取元素样式
元素:style:样式名=样式值读取方式:元素.style.样式名 1.通过style属性设置喝读取的都是内联样式案例:(在此和之前一样,创建HTML就省略不写了,一如既往的给出示例) 2.HT ...
javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
JavaScript 获取元素方法
仅供学习,转载请注明出处获取元素方法一可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如 ...

最新文章

热门文章