1.设置标签中的文本内容
//设置标签中的文本内容,应该用textContent属性,谷歌,火狐支持,IE8不支持
//设置标签中的文本内容,应该用innerContent属性,谷歌,火狐,IE8都支持
//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
//兼容代码
//设置任意标签中的任意文本内容
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;
}
}
2.innerHTML和innerText的区别
//总结:
/**
* 如果想要(获取)标签及内容:使用innerHTML;
* 如果想要设置标签,使用innerText
* 如果想要设置文本,用innerText,或者innerHTML,或者textContent
*/
3.自定义属性
//html标签没有这个属性,自己添加的属性----自定义属性
//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字");才能获取这个属性的值
var list=document.getElementsByTagName("li");
for(var i=0;i<list.length;i++){
list[i].onclick= function () {
alert(this.getAttribute("score"));
};
}
/**
* 自定义属性的设置与获取
* 设置自定义属性:setAttribute("属性名",属性值);
* 获取自定义属性:getAttribute("属性名");
* @type {NodeList}
*/
//根据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"));
};
}
//移除自定义属性:removeAttribute("属性名");----也可以移除元素的类样式
my$("btn").onclick= function () {
my$("dv").removeAttribute("score");
//移除元素的类样式
//my$("dv").className="";//值没了,但是属性还有
my$("dv").removeAttribute("class");//都没了
};