JavaScript DOM页面元素操作

梦里梦外; 2022-05-13 02:20 240阅读 0赞

### DOM  页面元素操作 ###

DOM（document  object  model） 概念：

文档：document，一个页面就是一个文档。也是页面的对象

节点：页面的所有内容。包括元素节点、文本节点、属性节点、（文档节点、注释节点）

元素：页面的所有标签。

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

DOM的初步认识

获取元素节点5种方式

1。通过 ID .getElementById  直接设置 属性

例子：`<img src="" height="" id="im">  document.getElementById("im").src="images/girl.jpg";`

2。通过标签 .getElementsByTagName（"标签名"）             返回的都是一个 伪数组。可以用for循环遍历

类名 .getElementsClassName （"类名"）

.getElementsName （"属性名"）

例子：`var arr = document.getElementsByTagName("div");`

`                               for( var i= 0; i<arr.length;i++){ arr[i].innerHTML = "我是div"}`

在行内的属性可以直接通过.value.

3。通过CSS选择器  .querySelector（" 选择器名字"）      ID选择器 返回一个节点。多个时返回第一个，没有返回null

其余（类标签属性等）选择器返回一个数组       \*IE8不支持

4.  如果想要为元素设置 自定义属性，使用 .setAttribute（属性名, 属性值）;    //设置多个循环

获取 自定义属性值使用 . getAttribute（属性名）;

移除任意属性  .removeAttribute( 属性名）；      // 若设置  .className = " " ; 值没有但属性名还在。

5。成对的标签，设置中间文本内容时，使用 .`innerText` 或  .`textContent` 属性

但是有问题：.`innerText是IE浏览器的标准输入，谷歌火狐IE都支持，然而低版本的火狐不支持`

`                 `.`textContent是火狐浏览器的标准输入，在IE8中是不支持的（结果是undefined）`

例子：`<p id="ss"><p>   document.getElementById("ss").innerText = "hello";`

`             `

6。在某个元素的事件中，自己的事件中的 this 就是当前元素的对象（自己）

例子：`<input type="button" value="按钮" id="btn">`

`var obj = document.getElementById("btn");`

`               obj.onclick = function (){ this.value="我是按钮"}`；

7。鼠标的排他功能思路。`:hover / :active`

例子：鼠标点击某一个时按钮颜色有白色变成绿色

经过的步骤 1.把所有的默认颜色设置为默认的（白色）  2.然后把要放上的按钮（this对象）颜色变为绿

8。在表单标签中，当属性的值只有一个，并且这个值是它本身，那么写js代码 DOM操作时，这个属性的值 是布尔类型就可以了                                 （如`checked="checked" `表示为非空字符串，双引号里输入任意数据都能实现选中功能）

`checked="checked"`  /  `multiple="multiple" / selected = "selected" / disabled="disabled"（文本禁用）`

9。阻止超链接的默认跳转？为元素事件的函数设置 `return false`；

例子：`<a href="http://www.baidu.com" onclick=" alert( '我不跳'); return false">`

10。一个很好的小想法。如果想给盒子加边框，不用box-sizing 约束。可以给所有盒子预先加上边框，颜色为背景色。当需要时修改颜色即可。

//鼠标的排他思想
    
    <head>
     <style>
        input{
            background-color: #c73636;
            color: #fff;
            border-style: none;
            width: 40px;
            height: 25px;
        }
        
        </style>
    </head>
    <body>
        <input type="button" value="颜色">
        <input type="button" value="颜色">
        <input type="button" value="颜色">
        <input type="button" value="颜色">
        <input type="button" value="颜色">
        <input type="button" value="颜色">
    
        <script>
        var arr = document.getElementsByTagName("input");
        for(var i=0;i<arr.length;i++){
            arr[i].onclick = function (){
                //步骤一，将所有的背景颜色设置为默认色；
                for(var j=0;j<arr.length;j++){
                    arr[j].style.backgroundColor="#c73636";
                }
    
            //步骤二 当前点击的对象的背景颜色变绿色
                this.style.backgroundColor ="#0f0";
            }
        }
        
        </script>
    </body>

//属性值唯一时，设置为布尔值
            <input type="radio" value="male" name="sex" id="">男
            <input type="radio" value="female" name="sex" id="">女
            <input type="radio" value="secret" name="sex" id="rad3">保密
            <input type="button" value="点击按钮默认选中保密" id="set">
            <script>
            function my$(id){
                return document.getElementById(id);
            }
            
            my$("set").onclick = function() {
                my$("rad3").checked= true;
            };
            </script>

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

常用的触发事件：

`1。鼠标的点击事件： .onclick `

`2。鼠标的移入移出事件：    .onmouseover  .onmouseout `

`3`。`光标聚焦 失焦事件：     .onfocus   .onblur`

`4。文本框内容选中改变事件：  .onselect  .onchange`

`5。网页加载完毕关闭事件：     .onload    .onunload`

`6。键盘抬起 按下事件：     .onkeyup   .onkeydown`

` 例子：dsgdgviregjrh`

` 例子：dsgdgviregjr`

innerText 与 innerHTML 区别：

设置标签内容：

innerText用来设置文本内容，设置标签无效。

innerHTML可以设置文本内容，也可以设置标签

获取标签内容：

innerText可以获取标签中间的文本内容，但是标签中如果还有标签，那么最里面的标签的文本内容也能获取.

innerHTML可以获取标签中间的所有内容，包括标签

//如果想要(获取)标签及内容，使用innerHTML

//如果想要设置标签，使用innerHTML  
//如果想要设置文本，用innerText,或者innerHTML,或者textCont

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

**DOM节点**

.nodeType （节点类型）    ===》     1是 标签           2  是属性               3  是文本

.nodeName （节点名字）   ===》   大写的标签名     小写的属性名        \#text

.nodeValue  （节点值）      ===》      null                   属性的值             文本内容

**节点的关系**（`元素单纯指标签`）**：**

父节点：`parentNode`

`   父元素：parentElement`

子节点：`childNodes`

`   子元素：children`

第一个/最后一个子节点：`firstChild `/ `lastChild`

`   第一个/最后一个子元素：firstElementChild `/ `lastElementChild`

之前/之后的兄弟节点：`previousSibling `/  `nextSibling`

`    之前之后的兄弟元素：previousElementSibling `/  `nextElementSibling`

元素的根元素：`ownerDocument`

注意：凡是获取节点的代码在谷歌和火狐得到的都是相关的 节点  ，凡是获取元素的代码在谷歌和火狐得到的都是相关的 元素。  
          从前四个后，凡是获取节点的代码在IE8中得到的是元素，获取元素的相关代码，在IE8中得到的是undefined----元素的代码，IE中不支持

**节点操作：**除了创建节点，所有操作都是要找到 元素的父节点 parentNode 才行。

document     `.createElement()    创建元素节点`

`        .createTextNode()   创建文本节点`

`parentElemnt `

`        .appendChild（）   把新建的节点插入到某个节点的子节点后面 `

`       .insertBefore(newElement , targetElement``)   在已有节点前插入一个新节点`

`       .removeChild（）   删除一个节点。成功返回删除的节点，失败返回null。`

. `replaceChild（newNode,oldNode）  `

获取body        document.body

获取标题        doucment.title

获取html        document.documentElement

**DOM创建元素的三种方式：**

一、document.write（"<span>  hello  </span>"）

缺点：在页面加载完毕后，通过这种方式创建元素，会重写页面。

二、 .innerHTML（"<span>   我是.innerHTML   </span>"）

三、 a.创建元素节点                                                                                         var par = document.getElementById(" parent") ;

b.追加到其父级元素节点后                                                                       var  ele = doucument.createElement（"span"）;

还可以继续创建文本节点（createTextNode），追加到元素后           par .appenChild( ele );

**为元素绑定事件的三种方式：**

一、对象. 事件       document .getElementById(" btn") . onclick = function () \{  console.log("我只能绑定一个事件") ;   \}

缺点：只能绑定一个事件

二、 调用 对象.addEventListener( 事件类型名 , 函数  ,false)方法              \*IE8不支持

document .getElementById(" btn").addEventListener("click", function ()\{

console.log("我是一个事件");

\}, false);

优点：可为同一个元素添加多个同类型事件

三、 调用 对象 .attachEvent（  (on)事件类型 ，函数）方法                       \*谷歌火狐不支持

document .getElementById(" btn") .attachEvent（" onclick" ,   fn ）;

addEventListener（）与  attachEvent（）区别

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

不同点:

1.方法名不一样。

2.参数个数不一样  。     addEventListener三个参数，attachEvent两个参数

3. addEventListener谷歌， 火狐，IE11支持，IE8不支持       attachEvent  谷歌火狐不支持，IE11不支持，IE8支持

4. this不同，addEventL istener中的this是当前绑定事件的对象      attachEvent中的this是window

5. addEventListener中事件的类型(事件的名字)没有on     attachEvent中的事件的类型(事件的名字)有on

**为事件解绑：**

**               **用什么方式绑定事件，就应该用对应的方式解绑事件

一、对象.on事件类型名=null;

document .getElementById(" btn") . onclick  =null;

二、对象. removeEventlistener("没有on的事件类型名"，函数名字，false);

三、对象. detachEvent("on事件类型名"，函数名字);

注意： 如果是要解绑事件，那么事件的处理函数要用命名函数 。因为匿名函数会把当成两个不同的函数。

//为任意元素绑定任意事件
    function addEvent(element, type ,fn) {
        if(element.addEventListener){   //1.判断浏览器支不支持addEventListener这个方法。
            element.addEventListener(type, fn ,false);   //addEventListener方法的事件名不用加on
        }else if(element.attachEvent){    //不行，换attachEvent方法。
        element.attachEvent("on"+type ,fn); 
        }else{
            element["on"+type] = fn;    
        }
    }
    
    
    //为事件解绑
     function removeEvent(element , type ,fnName){
            if(element.removeEventListener){
                element.removeEventListener(type ,fnName,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type ,fnName);
            }else{
                element["on"+type]=null;
            }
        }

**事件冒泡：**

有多个元素嵌套，有层次关系，这些元素都绑定了相同的事件，如果里面的元素的事件触发了,外面的元素自动触发该事件。

**事件委托**是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向外传播事件，假如页面上有这么一个节点树，div>ul>li>a;如果给a和div注册了点击事件，里面的 a执行点击事件的时候，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。a点击事件冒泡到最外面的div点击事件，这就是事件委托，委托它们父级代为执行事件。指定父级委托事件 去处理程序，用来管理某一类型的所有事件。

在使用  addEventlistener ("没有on的事件类型名"，事件处理函数，控制事件阶段)  方法为元素绑定事件后，在事件触发的过程           可能会出现事件冒泡的效果，为了阻止 事件冒泡 有两个方式：

1、 window. event. cancelBubble=true;      火狐不支持

2、 e.stopPropagation();          ie8 不支持

注意：window. event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准。由于事件参数e在IE8的浏览器中是不存在的            所以用window. event来代替。//可以直接输出这个对象

addEventListener中第三个参数是控制事件阶段的，事件的阶段有三个:

1----->事件捕获阶段  :从外到里 。

2----->事件目标阶段  :最开始选择的那个

3----->事件冒泡阶段: 从里朝外

通过 e. evenPhase 这个属性可以查看当前的事件在那个阶段。  
\*冒泡阶段与捕获阶段不会同时存在的，参数值为false 表示冒泡阶段 ，true表示捕获阶段。一般默认都是冒泡阶段，很少用捕获阶段。

//事件冒泡 元素嵌套示例
     <div id="div1">
         <div id="div2">
              <div id="div3">
              </div>
        </div>
    </div>

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

一、嵌套使用单双引号问题解决：

1. 里面内容纯字符串时，内双外单 、内单外双。

例：document.getElementById("td").innerHTML = " <img   src=" image/ girl.jpg"    alt =' sorry '> ";

2.里面 有变量时，内双外双，内单外单

str += "<li>"+arr\[i\] +" </ li>";

二、什么时候用命名函数/ 匿名函数？

如果是循环的方式添加事件，用命名函数比较节省空间

如果不是循环的方式，用匿名函数

三、误写js代码时,放在head头部出错;

原因:页面加载是 从上到下执行代码,执行函数时获取不到按钮, 页面加载完毕 后按钮才能点击,才能获取到id.

解决:  1. js代码放到后面  推荐

2.放到 window.onload 里边

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70]: /images/20220513/8a4a1ec9f0424ddc913ce4075523b243.png