Js获取元素

小梁故事会

2024-07-23 帮助1人

获取元素方式

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;

这篇好文章是转载于：学新通技术网

Js获取元素

获取元素方式

事件三要素

样式修改

自定义属性

排他思想练习

创建节点

事件

利用addEventListener事件监听方式

删除事件

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

excel下划线不显示怎么办

微信公众号没有声音提示怎么办

excel图片置于文字下方的方法

微信运动停用后别人还能看到步数吗