原生JS-DOM操作_dom操作练习题原生js-CSDN博客

本文链接：https://blog.csdn.net/zhao1955/article/details/84871575

前言：

开头不妨咱们先一块了解下，究竟什么是“原生的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;

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