webAPI4

1鼠标移入移出事件
<ul>
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>
    <li>这是第3个li标签</li>
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
</ul>

<script src="common.js"></script>
<script>
    //  鼠标移入事件  onmouseover
    //  鼠标离开事件  onmouseout

   var list =  document.getElementsByTagName("li");
   for(var i = 0 ; i < list.length ; i++){
       //给每一个li注册鼠标移入事件
       list[i].onmouseover = function () {
           this.style.backgroundColor = "pink";
       }
       list[i].onmouseout = function () {
           //恢复到这个标签的默认颜色
           this.style.backgroundColor = "";

       }

   }
</script>

2.关于焦点的事件
<input type="text" value="请输入搜索内容" id="txt">

<script src="common.js"></script>
<script>
    //  获取焦点  onfocus
    //  失去焦点  onblur

    //1.注册获取焦点的事件
    my$("txt").onfocus = function () {
        //console.log(this.value)
        this.value = "";
        this.style.outline = "none";//取消轮廓线
    }
    //注册失去焦点
    my$("txt").onblur = function () {
        this.value = "请输入搜索内容"
    }
    //需求: 在失去焦点的时候判断密码的长度  6<= x =< 10  背景颜色为红色, 否则为绿色
    my$("txt").onblur = function () {
        if(this.value.length >= 6 &&this.value.length <= 10 ){
            this.style.backgroundColor = "red";
        }else if(this.value.length == 0){
            this.style.backgroundColor = "";

        }else{
            this.style.backgroundColor = "green";

        }

    }
</script>

3.关于textContent的问题

<input type="button" value="设置" id="btn">
<div id="dv">哈哈</div>

<script src="common.js"></script>
<script>
    // innerText 谷歌, 火狐, ie 都支持
    // textContent    谷歌, 火狐, 支持    ie8不支持
    my$("btn").onclick = function () {
        my$("dv").textContent = "这是改变了的div"

        // console.log(my$("dv").innerText);
        // console.log(my$("dv").textContent);//
    }
    // textContent属性 在ie8 返回的是undefined;

    //判断这个属性的值如果是undefined , 说明这个浏览器不支持

    //兼容代码
    // 获取任意标签中间的文本内容, 需要返回值
    function getInnerText(element) {
        //判断类型
        if(typeof element.textContent == "undefined"){
            //不支持
            return element.innerText;
        }else{
            return element.textContent;
        }
    }

    // 设置任意标签中间的文本内容, 需要返回值
    //  形参: 操作的元素,  设置的内容
    function setInnerText(element, text) {
        //判断类型
        /*if(typeof element.textContent == "undefined"){
            //不支持
            element.innerText = text;
        }else{
            element.textContent = text;
        }*/
        if(element.textContent){
            //如果有值,  用textContent设置
            element.textContent = text;
        }else{
            //不支持
            element.innerText = text;
        }
    }
    //测试
    my$("btn").onclick = function () {
        console.log(getInnerText(my$("dv")));
        setInnerText(my$("dv"), "哈哈你好")
    }
</script>