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>

巴特西

DOM操作2

一、API和WebAPI

二、DOM对象

三、总结获取元素的方式

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

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

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

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

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

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

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

五、innerText和innerHTML的区别

六、自定义属性

七、直接通过document获取元素

八、案例

最新文章

热门文章