原生js 操作dom-js教程-PHP中文網

首頁

web前端

js教程

原生js 操作dom

小云云

Dec 08, 2017 pm 04:35 PM

javascript 原生操作

本文我們將跟大家分享原生js 操作dom ，希望對大家有用。

ng-click="brandFnc($event)"$scope.brandFnc = function($event) {
    // 通过 $event.target 来获取
}
ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target.nodeNameconsole.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点：createElement创建元素，
也可以使用createTextNode创建文本节点.
document.body指向的是<body>元素;document.documentElement则指向<html>元素
    //创建节点
    var createNode = document.createElement("p");
    var createTextNode = document.createTextNode("hello world");
    createNode.appendChild(createTextNode);
    document.body.appendChild(createNode);
    document.documentElement.appendChild(createNode);2)插入节点：appendChild，insertBefore，
insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面
//插入节点
 var createNode = document.createElement("p");var createTextNode = document.createTextNode("hello world");
  createNode.appendChild(createTextNode);
 var p1 = document.getElementById("p1");
 document.body.insertBefore(createNode,p1);3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点p1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。
//替换元素
var replaceChild = document.body.replaceChild(createNode,p1);//删除元素
var removeChild = document.body.removeChild(p1);4)节点的属性：firstChild:第一个子节点lastChild:最后一个子节点childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)nextSibling:下一个兄弟节点
previousSibling：上一个兄弟节点
parentNode：父节点
<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
复制代码
   //节点属性
    var ul = document.getElementById("ul");
    var firstChild = ul.firstChild;
    console.log(firstChild.innerHTML);
    var lastChild = ul.lastChild;
    console.log(lastChild.innerHTML);
    var length = ul.childNodes.length;
    console.log(length);
    var secondChild = ul.childNodes.item(1);
    console.log(secondChild.innerHTML);
    var forthChild = ul.childNodes.item(2).nextSibling;
    console.log(forthChild.innerHTML);
    var thridChild = forthChild.previousSibling;
    console.log(thridChild.innerHTML);
    var parentNode = forthChild.parentNode;
    console.log(parentNode.innerHTML);5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。
//文本片段
    var fragment = document.createDocumentFragment();
    var ul = document.getElementById("ul");
    var li = null;
    for (var i = 4; i >= 0; i--) {
        li = document.createElement("li");
        li.appendChild(document.createTextNode("item "+i));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);6）克隆元素
someNode.cloneNode(true):深度克隆，会复制节点及整个子节点
someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点 
//克隆
    var clone = ul.cloneNode(true);

登入後複製

document.body.appendChild(clone);

注意：1、childNodes.length存在跨瀏覽器的問題

#可以看到清單的html片段沒有用

<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>

登入後複製

這種書寫格式而是使用沒有換行的格式書寫，是因為在不同的瀏覽器中，取得ul.childNodes.length的結果有差異：
在ie中，ul.childNodes.length不會計算li之間的換行空格，從而得到數值為4在ff、chrome,safari中，會有包含li之間的空白符的5個文本節點，因此ul. childNodes.length為9若要解決跨瀏覽器問題，可以將li之間的換行去掉，改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中，透過cloneNode方法複製的元素，會複製事件處理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件監聽，則b也會擁有這些事件監聽。

在ff,chrome,safari中，透過cloneNode方法複製的元素，只會複製特性，其他一切都不會複製
因此，若要解決跨瀏覽器問題，在複製前，最好先移除事件處理程序。

ng-click="brandFnc($event)"$scope.brandFnc = function($event) {
    // 通过 $event.target 来获取
}
ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target.nodeNameconsole.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点：createElement创建元素，
也可以使用createTextNode创建文本节点.
document.body指向的是<body>元素;document.documentElement则指向<html>元素
    //创建节点
    var createNode = document.createElement("p");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    document.body.appendChild(createNode);

    document.documentElement.appendChild(createNode);2)插入节点：appendChild，insertBefore，
insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面
//插入节点

 var createNode = document.createElement("p");var createTextNode = document.createTextNode("hello world");

  createNode.appendChild(createTextNode);

 var p1 = document.getElementById("p1");

 document.body.insertBefore(createNode,p1);3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点p1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。
//替换元素

var replaceChild = document.body.replaceChild(createNode,p1);//删除元素
var removeChild = document.body.removeChild(p1);4)节点的属性：firstChild:第一个子节点lastChild:最后一个子节点childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)nextSibling:下一个兄弟节点
previousSibling：上一个兄弟节点
parentNode：父节点

<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>

复制代码

   //节点属性

    var ul = document.getElementById("ul");

    var firstChild = ul.firstChild;

    console.log(firstChild.innerHTML);

    var lastChild = ul.lastChild;

    console.log(lastChild.innerHTML);

    var length = ul.childNodes.length;

    console.log(length);



    var secondChild = ul.childNodes.item(1);

    console.log(secondChild.innerHTML);



    var forthChild = ul.childNodes.item(2).nextSibling;

    console.log(forthChild.innerHTML);

    var thridChild = forthChild.previousSibling;

    console.log(thridChild.innerHTML);



    var parentNode = forthChild.parentNode;

    console.log(parentNode.innerHTML);5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。

//文本片段

    var fragment = document.createDocumentFragment();

    var ul = document.getElementById("ul");

    var li = null;

    for (var i = 4; i >= 0; i--) {

        li = document.createElement("li");

        li.appendChild(document.createTextNode("item "+i));

        fragment.appendChild(li);

    }

    ul.appendChild(fragment);6）克隆元素
someNode.cloneNode(true):深度克隆，会复制节点及整个子节点
someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点 
//克隆

    var clone = ul.cloneNode(true);

    document.body.appendChild(clone);注意：1、childNodes.length存在跨浏览器的问题

登入後複製

可以看到有关列表的html片段没有用 
<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>

登入後複製

這種書寫格式而是使用沒有換行的格式書寫，是因為在不同的瀏覽器中，取得ul.childNodes.length的結果有差異：
在ie中，ul.childNodes.length不會計算li之間的換行空格，從而得到數值為4在ff、chrome,safari中，會有包含li之間的空白符的5個文字節點，因此ul.childNodes.length為9若要解決跨瀏覽器問題，可以將li之間的換行去掉，改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中，透過cloneNode方法複製的元素，會複製事件處理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件監聽，則b也會擁有這些事件監聽。

在ff,chrome,safari中，透過cloneNode方法複製的元素，只會複製特性，其他一切都不會複製
因此，若要解決跨瀏覽器問題，在複製前，最好先移除事件處理程序。

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7769

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1294

PHP教程

1234

Related knowledge

PyCharm使用教學：詳細指引你執行操作 Feb 26, 2024 pm 05:51 PM

PyCharm是一款非常受歡迎的Python整合開發環境（IDE），它提供了豐富的功能和工具，使得Python開發變得更有效率和便利。本文將為大家介紹PyCharm的基本操作方法，並提供具體的程式碼範例，幫助讀者快速入門並熟練操作工具。 1.下載安裝PyCharm首先，我們需要前往PyCharm官網（https://www.jetbrains.com/pyc

什麼是 sudo，為什麼它如此重要？ Feb 21, 2024 pm 07:01 PM

sudo（超級使用者執行）是Linux和Unix系統中的關鍵指令，允許一般使用者以root權限執行特定指令。 sudo的功能主要體現在以下幾個方面：提供權限控制：sudo透過授權使用者以臨時方式取得超級使用者權限，從而實現了對系統資源和敏感操作的嚴格控制。普通用戶只能在需要時透過sudo獲得臨時的特權，而不需要一直以超級用戶登入。提升安全性：透過使用sudo，可以避免在常規操作中使用root帳號。使用root帳戶進行所有操作可能會導致意外的系統損壞，因為任何錯誤或不小心的操作都將具有完全的權限。而

Linux Deploy的操作步驟及注意事項 Mar 14, 2024 pm 03:03 PM

LinuxDeploy的操作步驟及注意事項LinuxDeploy是一款強大的工具，可協助使用者在Android裝置上快速部署各種Linux發行版，讓使用者在行動裝置上體驗完整的Linux系統。本文將詳細介紹LinuxDeploy的操作步驟以及注意事項，同時提供具體的程式碼範例，幫助讀者更好地使用此工具。操作步驟：安裝LinuxDeploy：首先在

win10開機密碼忘記按F2怎麼操作 Feb 28, 2024 am 08:31 AM

想必很多的用戶家裡都有那麼幾台不用的電腦，因為長時間不用完全忘了開機密碼，於是想知道一下，忘記密碼要怎麼操作呢？那就一起來看看吧。 win10開機密碼忘記按F2怎麼操作1、按下電腦的電源鍵，然後開機時按下F2（不同電腦品牌進入bios的按鍵也不同）。 2.在bios介面中，找到security選項（不同品牌電腦的位置可能有所不同）。一般都在頂部的設定選單中。 3.然後找到SupervisorPassword選項並且點選。 4.這時候用戶就可以看到自己的密碼了，同時找到旁邊的Enabled切換為Dis

華為Mate60 Pro截圖操作步驟分享 Mar 23, 2024 am 11:15 AM

隨著智慧型手機的普及，螢幕截圖功能成為日常使用手機的必備技能之一。華為Mate60Pro作為華為公司的旗艦手機之一，其截圖功能自然也備受用戶關注。今天，我們就來分享華為Mate60Pro手機的截圖操作步驟，讓大家能夠更方便地進行截圖操作。首先，華為Mate60Pro手機提供了多種截圖方式，可以依照個人習慣選擇適合自己的方式來操作。以下詳細介紹幾種常用的截

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

PHP PDO教學：從基礎到精通的進階指南 Feb 19, 2024 pm 06:30 PM

1.PDO簡介PDO是PHP的擴充庫，它提供了一個物件導向的方式來操作資料庫。 PDO支援多種資料庫，包括Mysql、postgresql、oracle、SQLServer等。 PDO使開發人員能夠使用統一的api來操作不同的資料庫，這使得開發人員可以在不同的資料庫之間輕鬆切換。 2.PDO連接資料庫要使用PDO連接資料庫，首先需要建立一個PDO物件。 PDO物件的建構函式接收三個參數：資料庫類型、主機名稱、資料庫使用者名稱和密碼。例如，以下程式碼建立了一個連接到mysql資料庫的物件：$dsn="mysq

Astar質押原理、收益拆解、空投項目及策略 & 操作保姆級攻略 Jun 25, 2024 pm 07:09 PM

目錄Astar Dapp 質押原理質押收益拆解潛在空投項目：AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap 質押策略 & 操作“AstarDapp質押”今年初已升級至V3版本，對質押收益規則做了不少調整。目前首個質押週期已結束，第二質押週期的「投票」子週期剛開始。若要獲得「額外獎勵」收益，需掌握此關鍵階段（預計持續至6月26日，現餘不到5天）。我將細緻拆解Astar質押收益，

See all articles

原生js 操作dom

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題