JS基础学习:获取元素的方法
2019-04-02 本文已影响0人
Merbng
- 根据id属性的值获取元素，返回一个元素对象
document.getElementById("id属性的值"); - 根据标签名字获取元素，返回一个伪数组，里面保存了多个DOM对象
document.getElementByTagName("标签名字");
下面几个，有的浏览器不支持
- 根据name属性获取元素，返回一个伪数组
document.getElementByName("name属性的值"); - 根据类样式
document.getElementByClassName("类样式的名字"); - 根据选择器
document.querySelector("选择器的名字"); - 根据选择器获取元素，返回一个伪数组
document.querySelectorAll();
<input type="button" name="" id="btn" value="显示" />
<script src="js/common.js"></script>
<script>
var btnObj = document.querySelector('#btn');
btnObj.onclick = function() {
console.log("烦你");
};
</script>
根据name属性值获取元素
<body>
<input type="button" id="btn" value="设置" /> <br>
<input type="text" name="name1" id="" value="学习" /><br>
<input type="text" name="name3" id="" value="学习" /><br>
<input type="text" name="name4" id="" value="学习" /><br>
<input type="text" name="name1" id="" value="学习" /><br>
<input type="text" name="name6" id="" value="学习" /><br>
<input type="text" name="name1" id="" value="学习" />
<script src="js/common.js"></script>
<script type="text/javascript">
// 电脑按钮改变所有name属性值为name1的文本框
my$('btn').onclick = function() {
// 通过name属性值获取元素----表单的标签
var list = document.getElementsByName('name1');
console.log(list);
for(i=0;i<list.length;i++){
list[i].value="艾维克";
}
};
</script>
</body>
根据类样式的名字来获取元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.cls {
background-color: yellow;
}
</style>
</head>
<body>
<p>嘻嘻嘻嘻嘻嘻嘻</p> <br>
<p class="cls">柔柔弱弱若若若若若若若若</p><br>
<span>哇哇哇哇哇哇哇哇哇无无</span><br>
<span>啊啊啊啊啊啊啊啊啊</span><br>
<div id="">
第一个div
</div><br>
<div class="cls">
第二个div
</div>
<input type="button" name="" id="btn" value="显示效果" />
<script src="js/common.js"></script>
<!-- 根据类样式名字获取元素 -->
<script type="text/javascript">
my$('btn').onclick = function() {
console.log('点击')
var objs = document.getElementsByClassName('cls');
for (i = 0; i < objs.length; i++) {
objs[i].style.backgroundColor = "red";
}
};
</script>
</body>
</html>
列表隔行变色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<input type="button"id="btn" value="隔行变色" />
<ul id="uu">
<li>学习</li>
<li>存储</li>
<li>请求</li>
<li>问问</li>
<li>嗯嗯</li>
<li>软软</li>
<li>踢腿</li>
<li>应用</li>
</ul>
<script src="js/common.js"></script>
<script type="text/javascript">
my$('btn').onclick = function() {
var liList = my$("uu").getElementsByTagName("li")
for (var i = 0; i < liList.length; i++) {
console.log(i);
liList[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
}
};
</script>
</body>
</html>
列表的高亮显示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
ul {
list-style: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li>学习</li>
<li>请求</li>
<li>嗯嗯</li>
<li>软软</li>
<li>应用</li>
<li>嗷嗷</li>
<li>刚刚</li>
</ul>
<script src="js/common.js"></script>
<script>
var list = document.getElementsByTagName('li');
for (i = 0; i < list.length; i++) {
list[i].onmouseover = function() {
this.style.backgroundColor = "red";
};
list[i].onmouseout=function(){
this.style.backgroundColor="";
};
}
</script>
</body>
</html>
鼠标经过高亮案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
float: left;
margin-left: 10px;
border: 2px solid green;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="js/common.js"></script>
<script>
var list = document.getElementsByTagName('div');
console.log(list);
for(i=0;i<list.length;i++){
list[i].onmouseover=function(){
this.style.border="2px solid red";
};
list[i].onmouseout=function(){
this.style.border="";
};
}
</script>
</body>
</html>
移除自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: #008000;
}
</style>
</head>
<body>
移除自定义属性：removeAttribute（"属性的名字"）
<input type="button" name="" id="btn" value="移除自定义属性" />
<div id="dv" class="cls" score="10"></div>
<script src="js/common.js"></script>
<script>
// 点击移除元素的自定义属性
my$('btn').onclick = function() {
my$('dv').removeAttribute("score");
// 值没有了,但是属性还在, 移除元素的类样式
// my$('dv').className="";
// 也可以移除自带的属性
// my$('dv').removeAttribute("class");
};
</script>
</body>
</html>
相关链接：
demo地址
