Js获取元素
获取元素方式
1、getElementById 通过id获取元素
2、getElementsByClassName 通过class名获取元素多个元素以伪数组
3、getElementsByTagName 获取的为数组形式
4、getElementsByName 通过name 属性获取元素
5、querySelector 获取的结果为元素的第一个
6、querySelectorAll 获取元素对象的集合
如何获取?
document.获取元素的方式('标签名或者类名等')
获取标签修改dom元素
-
//通过querySelector去获取button 点击按钮时对button的值进行修改
-
//绑定一个单击事件单击时修改
-
//通过innerHTML去修改元素的内容
-
var btn =document.querySelector('button');
-
var btn =document.querySelector('button');
-
btn.onclick=function(){
-
btn.innerHTML='我已经被修改'
-
}
获取标签修改元素属性
-
//获取元素通过单击事件修改他的属性
-
var i=document.querySelector('input');
-
console.log(i);
-
i.onclick=function(){
-
i.type='radio'
-
}
事件三要素
事件源:事件被触发的对象
事件类型:如何如法如点击 onclick
事件处理程序 通过函数赋值
案例:通过点击事件将div的背景颜色进行改变
-
<style>
-
div{
-
width: 100px;
-
height: 100px;
-
background-color: red;
-
}
-
</style>
-
<script>
-
// 先获取到div
-
// 当点击div时会将背景颜色改为绿色 所以这个事件源就是这个div
-
var change=document.querySelector('div');
-
// 事件类型:也就是通过什么方式修改呢 通过onclick修改也就是事件类型为点击事件
-
change.onclick=function(){
-
this.style.backgroundColor='green'
-
}
-
</script>
除了onclick事件还有以下
鼠标事件 | 触发条件 |
onclick | 鼠标点击左键时触发 |
onmouSEO((Search Engine Optimization))ver | 鼠标经过时触发 |
onmouSEO((Search Engine Optimization))ut | 鼠标离开时触发 |
onmousemove | 鼠标移动时触发 |
onfocus | 获取鼠标焦点触发 |
onblur | 失去焦点时触发 |
onmouseup | 鼠标弹起时触发 |
onmousedown | 鼠标按下触发 |
样式修改
ClassList和ClassName
都是对元素进行修改必须为类名
ClassList用法如下
-
<style>
-
设置样式
-
.active{
-
width: 100px;
-
height: 100px;
-
background-color: red;
-
}
-
</style>
-
<body>
-
<ul>
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
</ul>
-
</body>
-
<script>
-
var li=document.querySelectorAll('li');
-
循环遍历出每一个li
-
for(var i=0;i<li.length;i ){
-
将每一个li通过classList.add('');方式添加
-
for(var j=0;j<li.length;j ){
-
li[i].classList.add('active')
-
}
-
移除active
-
li[i].ClassList.remove.('active')
-
}
-
</script>
ClassName如下
-
<style>
-
设置样式
-
.active{
-
width: 100px;
-
height: 100px;
-
background-color: red;
-
}
-
</style>
-
<body>
-
<ul>
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
</ul>
-
</body>
-
<script>
-
var li=document.querySelectorAll('li');
-
for(var i=0;i<li.length;i ){
-
for(var j=0;j<li.length;j ){
-
li[i].className='active'
-
}
-
li[i].className=''
-
}
-
</script>
自定义属性
自定义属性定义有两种方法一种是在标签里利用data-属性名如下:
<li data-index="1">1</li>
获取时通过dataset来获取如下:
li[0].dataset
还有一种是利用setAttribute('属性名','属性值');方式来设置,通过getAttribute('属性名’);
-
var li=document.querySelectorAll('li');
-
for(var i=0;i<li.length;i ){
-
li[i].setAttribute('index','1')
-
li[i].getAttribute('index')
-
}
删除属性通过removeAttribute('属性名')方式来进行删除
排他思想练习
-
<style>
-
.active{
-
background-color: pink;
-
}
-
</style>
-
-
-
<body>
-
<button>按钮1</button>
-
<button>按钮2</button>
-
<button>按钮3</button>
-
<button>按钮4</button>
-
<button>按钮5</button>
-
</body>
-
-
<script>
-
var btns=document.querySelectorAll('button');
-
console.log(btns);
-
// 利用循环遍历出按钮
-
for(var i=0;i<btns.length;i ){
-
// 设置点击事件点击时添加样式
-
btns[i].onclick=function(){
-
// 利用循环给每一个都进行样式为空
-
for(var i=0;i<btns.length;i ){
-
btns[i].className='';
-
-
}
-
// this指向的是你点击的这个按钮将这个按钮添加active
-
this.className='active'
-
}
-
}
-
</script>
创建节点
1、创建节点
document.createElement('元素名称')
2、添加节点
node.appendChild('child')
3、添加节点到指定位置
node.insertBefore(child,制定元素)
4、删除节点
node.removeChild(child)
5、复制节点
node.cloneNode()
事件
注册事件
注册事件有两种方法
传统注册方式
利用on开头的事件如onclick
<button οnclick=""></button>
btn.onclick = function() {}
特点:注册事件唯一,只能给同一个元素怒设置一个处理函数,后设置的处理函数会覆盖前边的
利用addEventListener事件监听方式
addEventListener( '事件',funct(){
},false/true)
第一个值为事件 这里不再需要onclick 直接click 第二个值为函数,当第三个值为false的时候为捕获阶段 当为true时会触发冒泡
删除事件
传统解绑方法为:
EventTarget.οnclick=null;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhighakj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22