JavaScript进阶--JS HTML DOM

╰+攻爆jí腚メ 2022-05-16 07:05 212阅读 0赞

#### 一、HTML DOM简介 ####

> 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。  
> HTML DOM (文档对象模型)  
> 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,HTML DOM 模型被构造为对象的树。

> 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。  
> JavaScript 能够改变页面中的所有 HTML 元素  
> JavaScript 能够改变页面中的所有 HTML 属性  
> JavaScript 能够改变页面中的所有 CSS 样式  
> JavaScript 能够对页面中的所有事件做出反应

#### 二、HTML DOM节点 ####

子节点
      Node.childNodes   -- 获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点
      Node.firstChild   -- 返回第一个子节点
      Node.lastChild    -- 返回最后一个子节点
    
    父节点
      Node.parentNode      -- 返回父节点
      Node.ownerDocument   -- 返回祖先节点（整个document）
    
    同胞节点
      Node.previousSibling       -- 返回前一个节点，如果没有则返回null
      Node.nextSibling           -- 返回后一个节点

获取和修改元素样式:
    HTML5为元素提供了一个新的属性：classList 来实现对元素样式表的增删改查
    node.classList.add(value);         -- 为元素添加指定的类
    node.classList.contains(value);    -- 判断元素是否含有指定的类，如果存在返回true
    node.classList.remove(value);   -- 删除指定的类
    node.classList.toggle(value);   -- 有就删除，没有就添加指定类
    
    修改DOM特性的方法
    Node.getAttribute('id')        -- 获取
    Node.setAttribute('id')        -- 设置
    Node.removeAttribute()         -- 移除
    Node.attributes                -- 获取DOM全部特性

#### 三、HTML DOM方法 ####

1.查找HTML元素
    
    1)通过id查找
    document.getElementById("id");
    -- 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素
    如果未找到该元素，则 x 将包含 null
    
    2)通过标签名查找 HTML 元素
    本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素
    实例:
    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");
    document.write(y[i].innerHTML);
    
    3)通过类名找到 HTML 元素
    本例通过 getElementsByClassName 函数来查找 class="className" 的元素：
    实例
    var x=document.getElementsByClassName("className");
    document.write(x[i].innerHTML);

2.改变HTML内容、属性
    var element=document.getElementById("content");
    element.innerHTML="小老弟，你怎么回事？";
    
    document.getElementById("image").src="landscape.jpg";
    document.getElementById("p2").style.color="blue";
    
    3.addEventListener() 方法
      removeEventListener()方法
    
    4.myCollection and nodeList
      NodeList 对象是一个从文档中获取的节点列表 (集合) 。
      NodeList 对象类似 HTMLCollection 对象。
      NodeList 只能通过索引来获取。 
      只有 NodeList 对象有包含属性节点和文本节点。
    
    5.JavaScript获取DOM元素的方法
    
      通过id获取（getElementById）
      通过name属性（getElementsByName）     
      通过标签名（getElementsByTagName）       -- 一般得到的是节点数组
      通过类名（getElementsByClassName）       -- 同上
      获取html的方法（document.documentElement）
      获取body的方法（document.body）
      通过选择器获取一个元素（querySelector）
      通过选择器获取一组元素（querySelectorAll）

6.JavaScript 添加删除dom节点
      1)插入节点appendChild(),在指定节点的最后一个子节点列表之后添加一个新的子节点
        插入节点insertBefore(),在已有的子节点前插入一个新的子节点
    
        + 先创建一个新的节点
    	+ 再向一个已有的节点添加该节点
        var para=document.createElement("p");              -- 创建一个新的节点
        var node=document.createTextNode("这是新段落。");   -- 该节点如需添加文本，则需要创建文本节点
        para.appendChild(node);               -- 再向p元素追加文本节点
    
        var element=document.getElementById("div1");    -- 获得要添加的节点
        element.appendChild(para);                      -- 利用appenChild追加子节点
    
      2)删除节点removeChild()，从子节点列表中删除某个节点
        删除成功此方法返回被删除的节点,删除失败则返回 NULL;
        子节点一旦remove则不在DOM树中,但是还存在内存中;如要完全删除对象,可通过把删除的子节
    点赋值给 x,再给x赋null
    
        var parent = document.getElementById("div1");
        var child = document.getElementById("span1");
        var x = parent.removeChild(child);
        x = null;
    
        + 首先找到要删除节点
        + 再找到要删除节点的父节点
        + 最后根据parent.removeChild(child)
        var parent=document.getElementById("div1");    -- 找到父节点
        var child=document.getElementById("p1");       -- 找到要删除的子节点
    
      3)替换元素节点replaceChild()	
        语法：parentNode.replace(newNode, targetNode);  -- 使用newNode替换targetNode

补充: [JavaScript操作dom节点总结][JavaScript_dom]

#### 四、代码实例 ####

1.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript HTML DOWN</title>
    </head>
    
    <body onload="checkCookies()">
    
    <h3 id="id1">JavaScript HTML DOM</h3>
    <p onclick="changeText(this)">小老弟</p>
    <button onclick="document.getElementById('id1').style.color='red'">点我!</button>
    
    <script> function changeText(id){ id.innerHTML="你怎么回事？"; } </script>
    <br> <br> <hr>
    
    	
    
    <p>弹窗-提示浏览器 cookie 是否可用</p>
    <script> function checkCookies(){ if (navigator.cookieEnabled==true){ alert("Cookies 可用") } else{ alert("Cookies 不可用") } } </script>
    	
    
    </body>
    </html>

2.<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数</p>
    <button id="myBtn" onclick="myFunction()">click</button> <br><br>
    <hr> <br>	
    
    <p id="p1"> </p>
    <button id="myBtn2" onmouseover="myFunction2()">onmouseover</button> <br><br>
    <button id="myBtn3" onmouseout="myFunction3()">mouseout</button> <br><br>
    <button id="myBtn4" onclick="myClear()">clear</button> <br>
    
    <script> //document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); alert("函数已被执行！"); } function myFunction2(){ document.getElementById("p1").innerHTML+="小老弟，"; } function myFunction3(){ document.getElementById("p1").innerHTML+="你怎么回事？"; } function myClear(){ document.getElementById("p1").innerHTML=" "; } </script>
    </body>
    </html>

#### 五、方法列表 ####

getElementById()	      返回带有指定 ID 的元素
    getElementsByTagName()	  返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
    getElementsByClassName()  返回包含带有指定类名的所有元素的节点列表
    
    appendChild()	    把新的子节点添加到指定节点
    removeChild()	    删除子节点
    replaceChild()	    替换子节点
    insertBefore()	    在指定的子节点前面插入新的子节点
    createAttribute()	创建属性节点
    createElement()	    创建元素节点
    createTextNode()	创建文本节点
    getAttribute()	    返回指定的属性值
    setAttribute()	    把指定属性设置或修改为指定的值

[JavaScript_dom]: https://www.cnblogs.com/timl525/p/5094703.html