青岛惠中建设监理有限公司网站第一站长网
目录
1.innerText和textContent：设置标签中的文本内容
2.innerText和innerHTML的区别
2.1 从设置来说
2.2 从获取来说
2.3 总结
3.自定义属性
3.1 自定义属性的引入
3.2 自定义属性设置和获取
3.3 移除某个元素的自定义属性
4.tab切换案例(排他、自定义属性综合性应用)
1.innerText和textContent：设置标签中的文本内容
- textContent属性：谷歌、火狐支持，IE8不支持
- innerText属性：谷歌、火狐和IE8都支持【实际上，innerText是IE8的标准属性，并不是W3C标准的属性】
但版本过低的火狐不支持innerText，为了考虑全面，要使用兼容代码。(封装innerText和textContent)
如果这个属性在浏览器中不支持，那么这个属性的类型是undefined；所以判断这个属性的类型是不是undefined，就知道浏览器
是否支持【typeof 元素对象.属性=="undefined"---true:不支持;false:支持】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;border: 1px solid red;}</style>
</head>
<body>
<input type="button" value="设置值" id="btn"/>
<div id="div">你好</div>
<script>function my$(id){return document.getElementById(id);}//设置任意标签中间的任意文本内容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$("div")));//你好setInnerText(my$("div"),"将\"你好\"设置为\"Hello\"");//div里的显示：将"你好"设置为"Hello"};
</script>
</body>
</html>2.innerText和innerHTML的区别
2.1 从设置来说
总结：
- innerText主要是设置文本内容的，设置标签内容，是没有标签的效果的
- innerHTML可以设置文本内容，主要是在标签中设置新的html标签内容，是有标签效果的
- 想要设置标签内容，使用innerHTML；想要设置文本内容，innerText、textContent、innerHTM都可以，推荐用innerHTML
2.2 从获取来说
总结：
- innerText可以获取标签中间的文本内容，但是标签中如果还有标签，标签里的文本内容也能获取(不获取标签，仅获取内容)
- innerHTML才是真正的获取标签中间的所有内容
2.3 总结
- 如果想要(获取)标签及内容，使用innerHTML
- 想要设置标签，使用innerHTML
- 想要设置文本，用innerText，或者innerHTML，或者textContent
3.自定义属性
3.1 自定义属性的引入
自定义属性：html标签本身没有这个属性，自己添加的，为了存储一些数据
3.2 自定义属性设置和获取
- 设置自定义属性：元素对象.setAttribute("自定义属性的名字","属性的值");
- 获取自定义属性的值：元素对象.getAttribute("自定义属性的名字");
3.3 移除某个元素的自定义属性
移除元素的属性(自定义属性或自带属性都可以)：元素对象.removeAttribute("属性的名字");
4.tab切换案例(排他、自定义属性综合性应用)
*{/*清除页面中所有标签可能存在的内外边距,但不建议这样使用,会极大地消耗资源*/margin: 0;padding: 0;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab切换案例</title><style>ul {list-style: none;/*清除ul标签默认的内外边距*/margin: 0;padding: 0;}.box {width: 400px;border: 1px solid black;margin: 100px auto;}.head {overflow: hidden;}.head span {display: inline-block;width: 90px;line-height: 50px;margin:auto 5px;float: left;background-color: pink;text-align: center;cursor: pointer;}.head span.current {background-color: dodgerblue;}.main li {height: 250px;background-color: dodgerblue;display: none;/*默认都是不显示*/}.main li.current {display: block;}</style>
</head>
<body>
<div class="box" id="box1"><div class="head"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="main"><ul><li class="current">我是体育模块</li><li>我是娱乐模块</li><li>我是新闻模块</li><li>我是综合模块</li></ul></div>
</div>
<script>function my$(id){return document.getElementById(id);}//获取最外面的divvar box=my$("box1");//获取的是里面的第一个divvar headDiv=box.getElementsByTagName("div")[0];//获取所有的span标签var spans=headDiv.getElementsByTagName("span");//获取的是里面的第二个divvar mainDiv=box.getElementsByTagName("div")[1];//获取所有的li标签var list=mainDiv.getElementsByTagName("li");//循环遍历的方式,添加点击事件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被点击的时候获取存储的索引值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>