DOM操作2

一、API和WebAPI

• API就是接口，就是通道，负责一个程序和其他软件的沟通，本质是预先定义的函数。
• Web API是网络应用程序接口。包含了广泛的功能，网络应用通过API接口，可以实现存储服务、消息服务、计算服务等能力，利用这些能力可以进行开发出强大功能的web应用。

二、DOM对象

• 通过DOM方式获取的元素得到的对象
• 页面中最顶级的对象：document
• 根元素：HTML标签

三、总结获取元素的方式

• 根据id属性的值获取元素，返回的是一个元素对象

document.getElementById("id属性的值")

• 根据标签的名字获取元素，返回的是一个伪数组，里面存储了多个DOM对象

 document.getElementsByTagName("标签名字")

• 根据name的值获取元素，返回的是一个伪数组，里面存储了多个DOM对象

document.getElementsByName("name属性的值")

• 根据类样式的名字来获取元素，返回的一个伪数组，里面存储了多个DOM对象

 document.getElementsByClassName("类样式的名字")

• 根据选择器获取元素，返回的是一个元素的对象

 document.querySelector("选择器的名字")

• 根据选择器获取元素，返回的是一个伪数组，里面存储了多个DOM对象

document.querySelectorAll("选择器的名字")

四、textcontent和innertext及其兼容性写法

• 设置标签中的文本内容，使用 textcontent 属性，谷歌火狐支持，IE8不支持
• 设置标签中的文本内容，使用 innertext  属性，谷歌火狐，IE8支持，但是有些低版本的火狐浏览器不支持
• 兼容性代码写写法：（原理：如果属性在浏览器不支持，这个属性类型是 undefined ）

 <script>
    //设置任何任意的标签中间的任意文本内容
        function setInnerTtext(element,text){
            if(typeof element.textContent=="undefined"){
                element.innerText=text;
            }else{
                element.textContent=text;
            }
        }
    //获取任意标签中间的文本内容
        function getInnerTtext(element){
            if(typeof element.textContent=="undefined"){
                return element.innerText;
            }else{
                return element.textContent;
            }
        }
    </script>

五、innerText和innerHTML的区别

• innerText  主要设置文本的内容的，设置标签的内容是没有标签的效果的
• innerHTML 可以设置文本的内容，也可以设置标签内容，标签可以呈现效果
• innerText 可以获取标签中间的文本内容，获取不到文本内容里包含的标签
• innerHTML 可以获取标签中间的文本内容，也可以获取文本中包含的标签
• 所以推荐使用innerHTML

六、自定义属性

• HTML本身没标签中本身没有这个属性，程序员自己添加的，为了储存数据
• 获取属性用getAttribute("属性名")-----如果html里写了自定义的标签或者已经设置

<input type="button" value="自定义" id="btn">
    <p new="20">获取这个自定义属性</p>
    <p id="demo"></p>
    <script>
        document.getElementById("btn").onclick=function(){
            var p=document.getElementsByTagName("p")[0];
            document.getElementById("demo").innerHTML=p.getAttribute("new");
        }
    </script>

• 设置属性用setAttribute（“名字”，“值”）-----通过js设置
• 移除自定义属性,用removeAttribute("属性的名字")-----也可以移除不是自定义的自带属性

    <input type="button" value="设置" id="btn1">
    <input type="button" value="移除" id="btn2">
    <p>设置一个自定义属性</p>
    <p>xxxxxxxxxx</p>
    <script>
       document.getElementById("btn1").onclick=function(){
           document.getElementsByTagName("p")[0].setAttribute("new","10");
       };
       document.getElementById("btn2").onclick=function(){
           document.getElementsByTagName("p")[0].removeAttribute("new");
       };
    </script>

七、直接通过document获取元素

    <script>
    //1.获取body
    console.log(document.body);//返回body标签(元素)
    //2.获取title
    console.log(document.title);//返回标签中的值,即标题
    //3.获取html
    console.log(document.documentElement);//返回html标签(元素)
    </script>

八、案例

 <!-- 例1:点击按钮禁用文本框 -->
    <input type="text" value="" id="txt">
    <input type="button" value="禁止使用文本框" id="btn">
    <script>
        document.getElementById("btn").onclick=function(){
            document.getElementById("txt").disabled=true;
        };
    </script>

<!-- 例2:点击按钮修改列表背景颜色 -->
    <input type="button" value="背景颜色" id="btn">
    <ul id="uu">
        <li>要拿执着</li>
        <li>让我不低头</li>
        <li>更精彩的活</li>
        <li>将命运打破</li>
    </ul>
    <script>
        document.getElementById("btn").onclick=function(){
            var liobj=document.getElementById("uu").getElementsByTagName("li");
            for(var i=0;i<liobj.length;i++){
                liobj[i].style.backgroundColor="yellow";
            }
        };
    </script>

<!-- 例3:阻止超链接跳转 -->
    <a href="http://www.baidu.com" id="ak">百度</a>
    <script>
        document.getElementById("ak").onclick=function(){
            return false;
        }
    </script>

<!-- 例4:点击小图切换大图 -->
    <a href="big.png" id="ak"><img src="small.png" alt=""></a><br>
    <img src="" alt="" id="big">
    <script>
        document.getElementById("ak").onclick=function(){
            document.getElementById("big").src=this.href;
            return false;
        };
    </script>

<!-- 例5:列表隔行变色 -->
    <input type="button" value="隔行变色" id="btn">
    <ul id="uu">
        <li>要拿执着</li>
        <li>让我不低头</li>
        <li>更精彩的活</li>
        <li>将命运打破</li>
    </ul>
    <script>
        document.getElementById("btn").onclick=function(){
            var liobj=document.getElementById("uu").getElementsByTagName("li");
            for(var i=0;i<liobj.length;i++){
                // if(i%2==0){
                //     liobj[i].style.backgroundColor="yellow";
                // }else{
                //     liobj[i].style.backgroundColor="red";
                // }
                liobj[i].style.backgroundColor=i%2==0?"yellow":"red";
            }
        };
    </script>

 <!-- 例6:列表高亮显示,排他功能 -->
    <ul id="uu">
            <li>要拿执着</li>
            <li>让我不低头</li>
            <li>更精彩的活</li>
            <li>将命运打破</li>
    </ul>
    <script>
        //获取所有的li标签
        var liobj=document.getElementById("uu").getElementsByTagName("li");
        for(var i=0;i<liobj.length;i++){
            //为li标签注册鼠标进入事件
            liobj[i].onmousemove=function(){
                this.style.backgroundColor="yellow";
            }
            //为li标签注册鼠标离开事件
            liobj[i].onmouseout=function(){
                this.style.backgroundColor="";
            }
        }
    </script>

<!-- 例7: 根据name属性值获取元素 -->
    <input type="button" value="显示效果" id="btn"><br>
    <input type="text" value="你好" name="name1"><br>
    <input type="text" value="你好" name="name2"><br>
    <input type="text" value="你好" name="name3"><br>
    <input type="text" value="你好" name="name1"><br>
    <input type="text" value="你好" name="name3"><br>
    <input type="text" value="你好" name="name2"><br>
    <input type="text" value="你好" name="name1">
    <script>
        document.getElementById("btn").onclick=function(){
            var inputs=document.getElementsByName("name1");
            for(var i=0;i<inputs.length;i++){
                inputs[i].value="我哈儿美好";
            }
        }
    </script>

<!-- 例8:根据类样式的名字获取元素 -->
    <div class="cls">第一个div</div>
    <div>第二个div</div>
    <span>第一个span</span><br>
    <span class="cls">第二个span</span><br>
    <input type="button" value="显示效果" id="btn">
    <script>
        document.getElementById("btn").onclick=function(){
            var clsobj=document.getElementsByClassName("cls");
            for(var i=0;i<clsobj.length;i++){
                clsobj[i].style.backgroundColor="yellow";
            }
        };
    </script>

 <!-- 例9:其他的获取元素的方法 -->
    <div class="dv">第一个div</div>
    <div>第二个div</div>
    <span>第一个span</span><br>
    <span id="sp">第二个span</span><br>
    <input type="button" value="显示效果" id="btn">
    <script>
        document.getElementById("btn").onclick=function(){
            document.querySelector(".dv").style.backgroundColor="yellow";
            var spobj=document.querySelectorAll("#sp");
            for(var i=0;i<spobj.length;i++){
                spobj[i].style.backgroundColor="pink";
            }
        };
    </script>

<!-- 例10:div高亮显示 -->

   <style>

       #dv{

        width: 200px;

        height: 200px;

        background: rgb(161, 131, 131);

        border: 10px solid rgb(161, 131, 131);

     }

     </style>

   <div id="dv"></div>
    <script>
        document.getElementById("dv").onmouseover=function(){
            this.style.border="10px solid red";
        }
        document.getElementById("dv").onmouseout=function(){
            this.style.border="";
        }
    </script>

 <!-- 例11:模拟搜索框 -->
    <input type="text" id="txt" value="请输入关键字" style="color: gray">
    <script>
        document.getElementById("txt").onfocus=function(){
            if(this.value=="请输入关键字"){
                this.value="";
                this.style.color="black";
            }
        };
        document.getElementById("txt").onblur=function(){
            if(this.value.length==0){
                this.value="请输入关键字";
                this.style.color="gray";
            }
        }
    </script>

<!-- 例13:验证文本框密码长度 -->
    <input type="text" value="" id="txt">
    <script>
        document.getElementById("txt").onblur=function( ){
            if(this.value.length>6&&this.value.length<10){
                this.style.backgroundColor="red";
            }else{
                this.style.backgroundColor="blue";
            }
        };
    </script>