操作dom、获取页面元素的方式、dom案例
常见获取页面元素的方式
根据id获取元素
var div = document.getElementById('main');
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget
根据标签名获取元素
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
根据name获取元素
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
根据类名获取元素
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
根据选择器获取元素
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
案例
设置image标签的图片和宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>minnersun</title>
</head>
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" alt="" id="im" />
<script>
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
var imObj=document.getElementById("im");
imObj.src="images/liuyan.jpg"; //设置图片
imObj.width="300"; //设置图片的大小
imObj.height="400";
};
</script>
</body>
</html>
修改标签内容
凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>minnersun</title>
</head>
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">我是一个p标签</p>
<script>
//案例:点击按钮,修改p标签的显示内容
document.getElementById("btn").onclick=function () {
document.getElementById("p1").innerText="这是一个p"; //根据id获取p标签,设置内容
};
</script>
</body>
</html>
设置a标签的地址和文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>minnersun</title>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<a id="ak" href="https://www.jiumodiary.com/">鸠摩搜书</a>
<script>
document.getElementById("btn").onclick = function () {
var aObj = document.getElementById("ak");
aObj.href = "http://www.itcast.cn"; //根据id获取超链接,设置href属性
aObj.innerText = "传智播客"; //根据id获取超链接,设置文字内容
};
</script>
</body>
</html>
更改多个p标签的文字内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv1">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</div>
<div id="dv2">
<p>嘎嘎</p>
<p>嘎嘎</p>
</div>
<script>
//document.getElementsByTagName("标签的名字");返回的是一个伪数组 -本质是Object
document.getElementById("btn").onclick=function () {
//根据标签名字获取标签
var pObjs= document.getElementsByTagName("p"); // 获取所有的p标签
var pObjs=document.getElementById("dv1").getElementsByTagName("p"); // 获取div1中的p标签
//循环遍历这个数组
for(var i=0;i<pObjs.length;i++){
//每个p标签,设置文字
pObjs[i].innerText="我们都是p";
}
};
</script>
</body>
</html>
排他功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
</head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
//循环遍历所有的按钮
for (var i = 0; i < btnObjs.length; i++) {
//为每个按钮都要注册点击事件
btnObjs[i].onclick = function () {
//把所有的按钮的value值设置为默认的值:没怀孕
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没怀孕";
}
//当前被点击的按钮设置为:怀孕了
this.value = "怀孕了";
};
}
</script>
</body>
</html>
禁用文本框输入功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
</head>
<body>
<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
//先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据id获取文本框,设置disabled属性
document.getElementById("txt").disabled=true;
};
</script>
</body>
</html>
阻止超链接跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
</head>
<body>
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("嘎嘎");
return false;
};
</script>
</body>
</html>
隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> </head> <body> <input type="button" value="隔行变色" id="btn"/> <ul id="uu"> <li>红旗</li> <li>五菱宏光</li> <li>奔驰</li> <li>兰博基尼</li> <li>哈弗</li> <li>奥拓</li> <li>奥迪</li> <li>悍马</li> </ul> <script src="common.js"></script> <script> //奇红偶黄 //点击按钮 // my$("btn").onclick=function () { // //获取所有的li标签 // var list=my$("uu").getElementsByTagName("li"); // for(var i=0;i<list.length;i++){ // if(i%2==0){ // //偶数 // list[i].style.backgroundColor="red"; // }else{ // //奇数 // list[i].style.backgroundColor="yellow"; // } // } // }; my$("btn").onclick = function () { //获取所有的li标签 var list = my$("uu").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow"; } }; </script> </body> </html>
innerText和textContent差别
textContent属性IE8不支持
innerText属性,谷歌,火狐,IE8都支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
<style>
div {
width: 200px;
height: 150px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="设置值" id="btn"/>
<div id="dv">哦,太神奇了</div>
<script src="common.js"></script>
<script>
//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
//判断这个属性的类型 是不是undefined,就知道浏览器是否支持
//兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
}
</script>
</body>
</html>
innerText和innerHTML区别
如果想要(获取)标签及内容,使用innerHTML 如果想要设置标签,使用innerHTML 想要设置文本,用innerText,或者innerHTML,或者textContent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
<style>
div{
width: 300px;
height: 200px;
border: 2px dotted red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果获取" id="btn2"/>
<div id="dv">
这是div
<p>这是一个p</p>
</div>
<script src="common.js"></script>
<script>
//总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
//总结:innerHTML是可以设置文本内容
//总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
//获取的时候:
//innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
//innerHTML才是真正的获取标签中间的所有内容
my$("btn").onclick=function () {
//my$("dv").innerText="哈哈";//设置文本
//my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码
//my$("dv").innerHTML="哈哈";
//my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的
};
//获取
my$("btn2").onclick=function () {
//可以获取标签中的文本内容
//console.log(my$("dv").innerText);
console.log(my$("dv").innerHTML);
};
</script>
</body>
</html>
操作自定义属性
获取自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
<style>
ul{
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="uu">
<li score="10">助教的数学成绩</li>
<li score="20">班主任的成绩</li>
<li score="30">小苏的成绩</li>
<li score="40">小杰老师成绩</li>
<li score="50">乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>
//html标签中有没有什么自带的属性可以存储成绩的----没有
//本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据
//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值
//获取所有的li标签
var list=document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].onclick=function () {
//alert(this.score);//不能
//可以
alert(this.getAttribute("score"));
};
}
</script>
</body>
</html>
设置自定义属性
setAttribute()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
<style>
ul{
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="uu">
<li>助教的数学成绩</li>
<li>班主任的成绩</li>
<li>小苏的成绩</li>
<li>小杰老师成绩</li>
<li>乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>
//总结:设置自定义属性:setAttribute("属性的名字","属性的值");
//获取自定义属性的值:getAttribute("属性的名字")
//获取所有的li标签,然后为每个标签中动态的添加自定义属性和值
//点击的时候获取该标签的自定义属性的值
//根据id获取ul标签,并且或者该标签中所有的li
var list=my$("uu").getElementsByTagName("li");
//循环遍历
for(var i=0;i<list.length;i++){
//先为每个li添加自定义属性
//list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
list[i].setAttribute("score",(i+1)*10);
//点击每个li标签,显示对应的自定义属性值
list[i].onclick=function(){
alert(this.getAttribute("score"));
};
}
</script>
</body>
</html>
移除自定义属性
removeAttribute()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
<style>
div{
width: 200px;
height: 100px;
background-color: yellow;
}
.cls{
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10" class="cls"></div>
<script src="common.js"></script>
<script>
//移除自定义属性:removeAttribute("属性的名字")
//点击按钮移除元素的自定义属性
my$("btn").onclick=function () {
//my$("dv").removeAttribute("score");
//移除元素的类样式
//值没有了,但是属性还是有的
//my$("dv").className="";
//也可以移除元素的自带的属性
my$("dv").removeAttribute("class");
};
</script>
</body>
</html>
tab切换案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box=my$("box");
//获取的是里面的第一个div
var hd=box.getElementsByTagName("div")[0];
//获取的是里面的第二个div
var bd=box.getElementsByTagName("div")[1];
//获取所有的li标签
var list=bd.getElementsByTagName("li");//=================================
//获取所有的span标签
var spans=hd.getElementsByTagName("span");
//循环遍历的方式,添加点击事件
for(var i=0;i<spans.length;i++){
//在点击之前就把索引保存在span标签中
spans[i].setAttribute("index",i);//================================
spans[i].onclick=function () {
//第一件事,所有的span的类样式全部移除
for(var j=0;j<spans.length;j++){
spans[j].removeAttribute("class");
}
//第二件事,当前被点击的span应用类样式
this.className="current";
//span被点击的时候获取存储的索引值
//alert(this.getAttribute("index"));
var num=this.getAttribute("index");//==============================
//获取所有的li标签,每个li标签先全部隐藏
for(var k=0;k<list.length;k++){
list[k].removeAttribute("class");
}
//当前被点击的span对应的li标签显示
list[num].className="current";
};
}
</script>
</body>
</html>
保存redis相关笔记
浙公网安备 33010602011771号