原生JS-DOM操作

前言:

开头不妨咱们先一块了解下,究竟什么是“原生的JS”,这样也帮助咱们构建一个完整的知识体系。

1:ECMAScript:规定了js语言核心语法的标准;2:Dom专门操作网页内容的API,例如常见的操作document.write("");3:Bom专门操作浏览器窗口的API,例如弹出浏览器的提示框(alert.prompt(""))。

------------------------------------------------------------------------------------------------------------------------------------------

DOM:

作用:操作页面的元素,关于如何获取、修改、添加或删除HTML元素的标准;

Dom树:把html页面或者xml文件看成一个“文档”,文档就是一个“对象”,这个对象中的所有的标签就是元素,元素其实也可以称作“对象”,通过嵌套关系组成的层级结构,简称树状图,也就是Dom树。

            那么获取元素的两种方式?

            根据id从整个文档中获取元素,返回一个元素对象:document.getElementById(“id属性的值”)

            根据标签的名字获取元素----返回元素对象组成的伪数组:document.getElementByTagName(“标签的名字”)

            备注:除此外还有些非“常用的”:根据标签的名字、根据类样式名字、根据选择器等等。

操作基本标签的属性:src/title/alt/href/id属性

        备注:阻止超链接默认跳转的事件:return false;

标签(from、input)的属性:name/value/type/checked/selected/disabled/readonly

元素的样式操作:(1):对象.style.属性=值;(2):对象.className=值;

为元素添加事件的操作:有事件源,触发和响应

    <input type="button" value="禁用" id="btn"/>
    <input type="text" value="文本框" id="txt"/>
    <script>
        document.getElementById("btn").onclick=function(){
            document.getElementById("txt").disabled=true;
    };
    </script>

------------------------------------------------------------------------------------------------------------------------------------------------------------

对象:1:内置对象:系统自带的对象;2:自定义对象:自己写的对象;3:浏览器对象:BOM对象;4:DOM对象

注意:如果某个属性在浏览器中不支持,那么这个属性的类型是undefined;也就是通过判断这个属性的类型,就知道此浏览器是否支持。

//例如:设置标签的文本内容,不同浏览器选择支持不一样textContent属性和innerText属性(支持性较好)
//设置任意的标签中间的文本内容
    function setInnerText(element,text){
        if(typeof element.textContent=="undefined"){
            element.innerText=text;
        }else{
            element.TextContent=text;
        }
    }
//获取任意的标签中间的文本内容
    function setInnerText(element,text){
        if(typeof element.textContent=="undefined"){
            return element.innerText;
        }else{
            return element.textContent;    
        }
    }
//innerText和InnerHtml区别:

共有:都可以设置标签的文本内容,如果要设置标签及内容推荐使用innerHtml

私有:如果要获得标签中的文本,innerText,也可以使用InnerHtml;但是如果获取的存在标签和文本,只能使用innerHtml。

//自定义属性的操作:

标签以前不存在此属性,为了需求,自己添加的属性

说明:自定义属性无法直接通过Dom对象的方式获取或者设置

操作方式:getAttribute("")和setAttribute("")和removeAttribute("");

----------------------------------------------------------------------------------------------------------------------------------------------------------

节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)

            类型:1:标签节点;2:属性节点;3:文本节点;

                                    nodeType(节点的类型):1:标签节点;2:属性节点;3:文本节点;

                                    nodeName:标签节点--大写的标签的名字,属性节点--小写的属性的名字,文本节点--#text

                                    nameValue:标签--null,属性--属性的值,文本--文本内容

                     文档:document---页面中的顶级元素

                     元素:页面中所有的标签(通过Dom方式获得标签成为Dom对象)

        元素创建的方式

        1:document.write("标签代码及内容");如果在页面加载完毕后创建元素,页面中的内容也会消失;

        2:父级对象.innerHTML="标签代码及内容";

        3:document.createElement("标签名字");得到的是一个对象

父级元素.appendChild(子级元素对象);

父级元素.insertBefore(新的子级对象,参照的子级对象);

父级元素.removeChild(整走的子级元素对象);

事件绑定:为同一个元素绑定多个相同的事件(三种方式)

    (1):对象.on事件名称=事件处理函数
    弊端:相同事件注册都用这种方式,最后一个执行,其余被覆盖。
    解绑:对象.on事件名称=null;

    (2):对象.addEventListener("没有on事件名字",事件处理函数,false);
    解绑:对象.removeEventListener("没有on事件名字",事件处理函数,false);
    例如:document.getElementByid("btn").addEventListener("click",function(){},false);

    (3):对象.attachEvent("on事件类型",命名函数);
    解绑:对象.detachEvent("on事件类型",命名函数);

    //示例:兼容代码
        funciton addEventListener(element,type,fn){
            if(element.addEventListener){
                element.addEventListener(type,fn,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,fn);
            }else
                element["on"+type]=fn;
            }    
        }

    总结(2)和(3)

    相同点:都可以为元素绑定事件

    不同点:

    1:方法名不一样

    2:参数个数不一样addEventListener三个参数,attachEvent两个参数;

    3:this代指不同,addeventListener表示当前绑定事件的对象,后者表示的是window.

    4:前者中事件类型(事件名称无on),后者包含;

事件冒泡:元素A中有元素B,都有相同的事件,里面元素事件触发了,外面元素事件也会触发,多个元素嵌套。

            阻止事件冒泡:(1):e.stopPropagation();(2):window.event.cancelBubble=true;

-------------------------------------------------------------------------------------------------------------------------------------------------------------

后记:

了解核心知识内容后,剩下的就是针对于知识点的熟练操作,起始于理解,侧重于练习,否则一切空谈;

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值