继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

和我一起学习DOM(第二篇)

煜_前端
关注TA
已关注
手记 3
粉丝 3
获赞 15

DOM(第二篇)

1、标签的内容

1.1 innerText和innerHTML属性都是用来获取和设置标签的内容的。

innerText:在获取的时候仅仅是内容,会丢弃html标签;在设置标签的内容的时候,会对标签进行转义。

innerHTML:在获取的时候仅仅是内容,还包括了html标签;在设置标签内容的时候,能够是识别html标签。    

innerHTML和innerText在设置的时候,会覆盖原来的内容。

1.2 innerText的兼容性问题

        在谷歌浏览器中:支持innerText和textContent;

        在低版本的火狐浏览器不支持innerText属性,但是支持textContent属性;

        在IE678中不支持textContent属性,但是支持innerText属性。

        因此我们需要对此进行兼容性封装(这边只进行简单的浏览器兼容性封装)。

1.3 兼容性封装

             function getInnerText(element){
              if(typeof element.innerText==="string"){
                //能力检测:检测浏览器有没有这个能力;
                //说明支持innerText这个属性;
                return element.innerText;
              }else{
                //不支持innerText属性,说明是低版本的火狐浏览器,用textContent
                return element.textContent;
              }
            }

            function setInnerText(element,content){
              if(typeof element.innerText==="string"){
                element.innerText=content;
              }else{
                element.textContent=content;
              }
            }

2、表单元素属性

2.1、disabled属性

    标签中的disabled属性:在标签中,只要指定了disabled属性,无论有值无值,都代表这个input是被禁用的。

            <input type="text" id="txt1" disabled/> 该文本框被禁用;
            <input type="text" id="txt2"/> 该文本框可以正常使用;

    DOM对象中的disabled属性:在DOM对象中,disabled的属性是一个布尔类型的属性,值只有true和false。

                var tet = document.getElementById("txt");
                txt.disabled=true;//该文本框被禁用
                txt.disabled=false;//该文本框能正常使用

2.2、type属性

    标签中的type属性:在标签中,type属性指定了input框的类型,常用的有:text、checkbox、button;

            <input type="text"/><br/> //文本框
            <input type="button" value="按钮" id=“btn”/> //按钮

    DOM对象中的type属性:在DOM对象中,也有同样的type属性,这个type属性的取值和标签是一样的,是一个字符串。

            var btn=document.getElementById("btn");
            console.log(btn.type); //button;

2.3、value属性

    标签的value属性:在标签中,value属性指定了input框的值。

                <input type="text" value="12"/><br/>
                <input type="button" value="禁用按钮" id="btn"/>

    DOM对象中的value属性:在DOM对象中,也同样有value属性,我们可以通过DOM对象中的value属性来指定input框的值.

            var btn =document.getElementById("btn");
            console.log(btn.value); //打印出按钮中的值
            btn.value="aa";  //修改按钮的值

2.4、selected属性

    标签中的selected属性:在option标签中,只有指定了selected属性,说明这个option被选中。    

            <select name="" id="">
                    <option value="xm" id="xm">小米</option>
                    <option value="zs" selected>张三</option>  //张三被选中了
                    <option value="ls">李四</option>
            </select>

DOM对象中的selected属性:在DOM对象中,selected的属性是一个布尔类型的属性,值只有true和false。

            var xm=document.getElementById("xm");
            xm.selected=true; //该option被选中
            xm.selected=false; //该option没被选中

2.5、checked属性

    标签中checked属性:在标签中,只要指定了checked属性,说明这个checkbox被选中。

                <input type="checkbox" id="ck" checked>   //被选中了

   DOM对象中dechecked属性:在DOM对象中,checked的属性是一个布尔类型的属性,值只有true和false。

                    var all =document.getElementById("ck");
                    all.checked=true;//该checkbox被选中;
                    all.checked=false;//该checkbox没被选中;

3、标签的自定义属性

3.1、标签的自定义属性

            在html页面中,自定义一个属性为aa=“bb”;
               <div id="box" aa="bb"></div>

在js代码中:

    <script>
            var box= document.getElementById("box");
            console.log(box.id);  //打印出box  可以用个DOM对象能能够获取到标签的固有属性;
            console.log(box.aa);  //打印出undefined  对于自定义的属性,无法通过DOM对象的属性来获取;
        </script>   
        //但是,在 IE678中是可以获取得到的

3.2、getAttribute方法

        语法:getAttribute(name):name属性名   作用是用来获取DOM对象对应的HTML标签的属性(包括自定义的属性和固定属性)。
    //html 中有一个div
                    <div id="box" aa="bb"></div>
                    //js代码
                    var box=document.getElementById("box");
                    console.log(box.getAttribute("id"));  //box
                    console.log(box.getAttribute("aa"))   //bb
        //注意:getAttribute获取的是标签中的属性,因为传递的参数就是标签中属性的名字,因为获取class属性传递的是class,而不是className

3.3、setAttribute方法

        语法:setAttribute(name,value):name属性名 value:属性值   

        可以给标签设置属性(包括固有属性和自定义属性),并且能在html标签中显示出来。
                           <div id="box"></box>
                    <script>
                        var bar =document.getELementById("box");
                        box.setAttribute(aa,"bb"); //给html标签设置了一个aa="bb"的自定义属性
                    </script>   

3.4、removeAttribute方法

        语法:removeAttribute(name):name需要移除的属性名,方法用于移除标签的属性(包括自定义的属性和固有的属性)。

                var box =document.getElemenetById("box");
                box.removeAttribute("class"); //把class属性给移除掉了。

总结:对于标签的固有属性,通过DOM对象和attribute系列方法都可以进行设置和获取。对于标签的自定义属性,只能通过attribute系列方法来进行设置和获取。

4、节点

4.1、节点的属性

        如何获取属性节点呢?
            var box = document.getElementById("box");
            box.getAttributeNode("id");  //获取到的是属性节点。

图片描述

4.2、节点的层次

        子级元素:

            childNodes  //子节点(包括元素节点和其他很多类型的节点);

            children  //子元素   虽然不是DOM标准中的方法,但是所有浏览器都兼容(使用比较多);

            nextSibling  //下一个兄弟节点;

            nextElementSibling //下一个兄弟元素,有兼容性问题,需要进行封装;

            previousSibling //上一个兄弟节点;

            previousElementSibling  //上一个兄弟元素,有兼容性问题,需要进行封装;

            firstChild //第一个节点;

            firstElementChild //第一个子元素,有兼容行问题,需要进行封装;

            lastChild //最后一个节点;

            lastElementChild //最后一个子元素,有兼容性问题,需要进行封装;

兼容性封装 :

        1:  function getNextElement(element){
              if(element.nextElementSibling){
                return element.nextElementSibling;
              }else{
                //只能先获取下一个兄弟节点
                var node = element.nextSibling;
                while(node && node.nodeType!=1){
                  node=node.nextSibling; //接着往后面找
                }
                return node;
              }
            }

        2:  function getPriviousElement(element){
                if(element.previousElementSibling){
                  return element.previousElementSibling;
                } else{
                  //只能先获取上一个兄弟节点
                  var node = element,previousSibling
                  while(node && node.nodeType!=1){
                    node=node.previousSibling;  //接着往前面找
                  }
                  return node;
                }
            }

        3: function getFirstChild(element){
                if(element.firstElementChild){
                    return element.firstElementChild;
                }else{
                  var node =element.firstChid;
                  while(node && node.nodeType!=1){
                    node=node.nextSibling;
                    }
                    return node;
                }
            }

        4: function getLastChild(element){
                if(element.lastElementChild){
                    return element.lastElementChild;
              }else{
                var node =element.lastChild;
                while(node && node.nodeType!=1){
                  node=node.previousSibling
                }
                return node
              }
        }
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP