目录
Tips:
1.获取元素方式:
- 根据id属性的值获取元素,返回来的是一个元素对象
- document.getElementById("id属性的值");
- 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
- document.getElementsByTagName("标签名字");
下面的几个,有的浏览器不支持
- 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
- document.getElementsByName("name属性的值")
- 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
- document.getElementsByClassName("类样式的名字")
- 根据选择器获取元素,返回来的是一个元素对象
- document.querySelector("选择器的名字");
- 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
- document.querySelectorAll("选择器的名字")
2.innerText和textContent的区别:
- 设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
- 设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
- 如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
- 判断这个属性的类型 是不是undefined,就知道浏览器是否支持
3.innerText和innerHTML的区别
- 如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
- innerHTML是可以设置文本内容
- innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
- 想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
获取的时候:
- innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
- innerHTML才是真正的获取标签中间的所有内容
结论:
- 如果想要(获取)标签及内容,使用innerHTML
- 如果想要设置标签,使用innerHTML
- 想要设置文本,用innerText,或者innerHTML,或者textContent
4.浏览器兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
}
//获取任意标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
//测试
my$("btn").onclick=function () {
//console.log(getInnerText(my$("dv")));
setInnerText(my$("dv"),"哈哈,我又变帅了");
};
5.设置、获取、移除自定义属性的值:
- setAttribute("属性的名字","属性的值");
- getAttribute("属性的名字");
- removeAttribute("属性的名字");//移除元素的类样式
//值没有了,但是属性还是有的 //my$("dv").className="";
//也可以移除元素的自带的属性// my$("dv").removeAttribute("class");
代码:
1.阻止超链接跳转
</script>
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("嘎嘎");
return false;
};
</script>
2.相册
<script>
//点击a标签,把a标签中的href的属性值给id为image的src属性
//把a的title属性的值给id为des的p标签赋值
//从ul中标签获取获取所有的a标签
var aObjs=my$("imagegallery").getElementsByTagName("a");
//循环遍历所有的a标签
for(var i=0;i<aObjs.length;i++){
//为每个a标签注册点击事件
aObjs[i].onclick=function () {
//为id为image的标签的src赋值
my$("image").src=this.href;
//为p标签赋值
my$("des").innerText=this.title;
//阻止超链接默认的跳转
return false;
};
}
</script>
3.隔行换色
<script>
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>
4.列表高亮显示
<script>
//鼠标进入和鼠标离开两个事件
//获取所有的li标签
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//为li注册鼠标进入事件
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//为li注册鼠标离开事件
list[i].onmouseout = function () {
//恢复到这个标签默认的颜色
this.style.backgroundColor = "";
};
}
</script>
5.显示和隐藏二维码
<script>
//获取鼠标要进入的a标签
//先获取最外面的div
var aObj=my$("node_small").getElementsByTagName("a")[0];
//为a注册鼠标进入
aObj.onmouseover=function () {
my$("er").className="erweima show";
};
//为a注册鼠标离开
aObj.onmouseout=function () {
my$("er").className="erweima hide";
};
</script>
6.div高亮显示
<script>
//获取所有的
//div
var dvObjs=document.getElementsByTagName("div");
for(var i=0;i<dvObjs.length;i++){
//为每个div添加鼠标进入的事件
dvObjs[i].onmouseover=function () {
this.style.border="2px solid red";
};
//为每个div添加鼠标离开的事件
dvObjs[i].onmouseout=function () {
this.style.border="";
};
}
</script>
7.模拟搜索框
<script>
//获取文本框
//注册获取焦点的事件
my$("txt").onfocus = function () {
//判断文本框的内容是不是默认的内容
if (this.value == "请输入搜索内容") {
this.value = "";//清空文本框
this.style.color = "black";
}
};
//注册失去焦点的事件
my$("txt").onblur = function () {
// if (this.value == "") {
// this.value = "请输入搜索内容";
// this.style.color = "gray";
// }
if (this.value.length == 0) {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
</script>
8.获取文本框的值
<script>
my$("btn").onclick=function () {
console.log(document.getElementsByTagName("p")[0].innerText);
};
</script>
9.自定义属性的设置和获取
//根据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"));
};
}
10.tap键切换
<!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>