静态页面
<body>
<input type="button" value="设置" id="btn">
<div id="div1">哈哈</div>
</body>
在项目中新建一个名为comment.js文件,并定义一个通过id选择器获取元素的方法。
function my$(id){
return document.getElementById(id);
}
将comment.js文件引入当前页面中,在此页面中通过id获取元素就可以不用写document.getElementById(“元素id名”),直接调用my$(“元素id名”)的方法
<script src="comment.js"></script>
<script>
//innerText 谷歌 火狐 ie都支持
// my$("btn").onclick=function () {
// console.log(my$("div1").innerText);
//textContent 谷歌 火狐 支持 ie8不支持
// console.log(my$("div1").textContent)
// my$("div1").textContent="这是改变了的div"
// }
//textContent在ie8返回的是undeFined;
//判断这个属性的值如果是undefined,说明这个浏览器不支持
//兼容代码
//获取任意标签中间的文本内容,需要返回值
function getInnerText(elelment) {
//判断类型
if (typeof elelment.textContent=="undefind") {
//不支持
return elelment.innerText;
}
else {
return elelment.textContent;
}
}
//测试
my$("btn").onclick=function () {
console.log(getInnerText(my$("div1")));
}
// 设置任意标签中间的文本内容, 需要返回值
// 形参: 操作的元素, 设置的内容
//方法一
function setInnerText(element,text) {
//判断类型
// if (typeof elelment.textContent=="undefind") {
// //不支持
// elelment.innerText=text;
// }
// else {
// elelment.textContent=text;
// }
//方法二..................................................
if (element.textContent) {
//如果有值,用textContent设置
element.textContent=text;
}
else {
//不支持
element.innerText=text;
}
}
//测试
my$("btn").onclick=function () {
console.log(getInnerText(my$("div1")));
setInnerText(my$("div1"),"哈哈")
}
</script>