Javascript——现在不懂也许以后就懂了的案例4-优快云博客

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/94409600

例：div高亮显示

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 150px;
            background-color: pink;
            float: left;
            margin-left: 10px;
            float: left;
            border: 2px solid green;
        }
    </style>
 ……
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="common.js"></script>
<script>
    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>

例：模拟搜索框

<input type="text" value="请输入搜索内容" id="txt" />
<script src="common.js"></script>
<script>
    //获取文本框
    //注册获取焦点的事件
    my$("txt").onfocus=function(){
        //判断文本框的内容是不是默认的内容
        if(this.value=="请输入搜索内容"){
            this.value="";//清空文本框
            this.style.color="black";
        }
    };
    //注册失去焦点的事件
    my$("txt").onblur=function(){
        if(this.value.length==0){
            this.value="请输入搜索内容";
            this.style.color="gray";
        }
    };
</script>

例：验证文本框密码长度

<input type="text" value="" id="txt" />
<script src="common.js"></script>
<script>
    //获取文本框
    my$("txt").onblur=function(){
        //判断密码长度
        if(this.value.length>=6&&this.value.length<=10){
            this.style.backgroundColor="red";
        }else{
            this.style.backgroundColor="green";
        }
    }
</script>

例：封装innerText和textContent

//设置标签中的文本内容，应该使用textContent属性，谷歌，火狐支持，IE8不支持
//设置标签中的文本内容，应该使用innerText属性，谷歌，火狐，IE8都支持
//如果这个属性在浏览器中不支持，那么这个属性的类型是undefined
//判断这个属性的类型是不是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;
    }
}

innerText和innerHTML
总结：
1.如果使用innerText主要是设置文本，设置标签内容，是没有标签效果的
2.innerHTML是可以设置文本内容
3.innerHTML主要作用是在标签中设置新的html标签内容，是有标签效果的
4.想要设置标签内容，使用innerHTML，想要设置文本内容，innerText或者textContent，或者innerHTML，推荐用innerHTML

获取的时候：
innerText可以获取标签中间的文本内容，但标签中如果还有标签，那么最里面的标签的文本内容也能获取。——获取不到标签，但文本可以获取
innerText才是真正的获取标签中间的所有内容；如果想要获取标签及内容，使用innerHTML；如果想要设置标签，使用innerHTML；想要设置文本，用innerText，或者innerHTML或者textContent

    <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">
    哈哈哈
    <p>这是一个p</p>
</div>
<script src="common.js"></script>
<script>
	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);
    }
</script>