JavaScript 操作 DOM

发布时间：2024-02-20 10:30

一、获取 DOM 节点


<div id=\"test-div\">
<div class=\"c-red\">
    <p id=\"test-p\">JavaScriptp>
    <p>Javap>
  div>
  <div class=\"c-red c-green\">
    <p>Pythonp>
    <p>Rubyp>
    <p>Swiftp>
  div>
  <div class=\"c-green\">
    <p>Schemep>
    <p>Haskellp>
  div>
div>

/**
 * 页面加载后执行
 */
window.onload = function(){
  // 获取 JavaScript
 
  // 1. 通过 id 获取节点， id 是唯一的
  var jsOne = document.getElementById(\'test-p\')
    
  // 2. 返回文档中与指定选择器或选择器组匹配的第一个 Element 对象。 
  var jsTwo = document.querySelector(\'#test-p\');
  
  // 获取 Python
,Ruby
,Swift
  // 1. 通过 class 名称，然后获取所有子节点
  var arrOne = document.getElementsByClassName(\'c-red c-green\')[0].children;
  
  // 2. 返回文档中匹配指定 CSS 选择器的所有元素 class name 用 . 的形式，返回 NodeList 对象
  var arrTwo = document.querySelectorAll(\'.c-red.c-green > p\');
  
  // 获取 Haskell
  // 1. c-green 的 class 名称有两个，因此我们获取后面那个，再获取最后一个子节点
  var haskellOne = document.getElementsByClassName(\"c-green\")[1].lastElementChild;
  
  // 2. 使用 querySelectorAll 的方式
  var haskellTwo = document.querySelectorAll(\'.c-green\')[1].lastElementChild;
}

二、更新 DOM 节点


<div id=\"test-div\">
  <p id=\"test-js\">javascriptp>
  <p>Javap>
div>

修改 DOM 节点 css 样式

var js = document.querySelector(\'#test-js\');

// js.innerHtml = \'JavaScript\'
js.innerText = \'JavaScript\'

// 修改 CSS 为: color: #ff0000, font-weight: bold

js.style.color = \'#ff0000\';
js.style.fontWeight = \'bold\';

innerText 与 innerHtml 都可以写入当前节点的值，区别在于 innerHtml 还可以写入 html 标签，如果在网络上获取，可能会被 XSS 攻击。

三、插入 DOM 节点

3.1 插入已经存在的 DOM 节点

如果原来的节点为空，可以用 innerHTML来增加节点。

如果原来的节点不为空，那么就不能用 innerHTML，因为它会直接替换掉原来的所有子节点，原来的就没了。


<p id=\"js\">JavaScriptp>
<div id=\"list\">
  <p id=\"java\">Javap>
  <p id=\"python\">Pythonp>
  <p id=\"scheme\">Schemep>
div>

插入已经有的节点

window.onload = function() {
    var js = document.getElementById(\'js\');
    var list = document.getElementById(\'list\');
    list.appendChild(js);
}

会将原来的

JavaScript

删除，然后添加到 list 中。

执行后 html 结构如下：


<div id=\"list\">
    <p id=\"java\">Javap>
    <p id=\"python\">Pythonp>
    <p id=\"scheme\">Schemep>
    <p id=\"js\">JavaScriptp>
div>

大部分我们并不需要这样操作，而是插入新的节点。

3.2 插入新的节点

创建一个新节点，然后插入。

window.onload = function() {
    var list = document.getElementById(\'list\');
    
    // 创建一个新节点
    var haskell = document.createElement(\'p\');
    haskell.id = \'haskell\';
    haskell.innerText = \'Haskell\';
    list.appendChild(haskell);
}

执行后 html 文档如下:


<div id=\"list\">
    <p id=\"java\">Javap>
    <p id=\"python\">Pythonp>
    <p id=\"scheme\">Schemep>
    <p id=\"haskell\">Haskellp>
div>

3.3 动态增加样式

    var d = document.createElement(\'style\');
    d.setAttribute(\'type\', \'text/css\');
    d.innerHTML = \'p { color: red }\';
    document.getElementsByTagName(\'head\')[0].appendChild(d);

3.3 插入节点到指定位置

    <div id=\"list\">
        <p id=\"java\">Javap>
        <p id=\"python\">Pythonp>
        <p id=\"scheme\">Schemep>
    div>

window.onload = function () {
    var list = document.getElementById(\'list\');
    var ref = document.getElementById(\'python\');

    var haskell = document.createElement(\'p\');
    haskell.id = \'haskell\';
    haskell.innerText = \'Haskell\';
    
    // 将节点插入到 ref 节点之前
    list.insertBefore(haskell, ref);
}

执行后，新的 html 文档如下：


<div id=\"list\">
    <p id=\"java\">Javap>
    <p id=\"haskell\">Haskellp>
    <p id=\"python\">Pythonp>
    <p id=\"scheme\">Schemep>
div>

3.4 遍历子节点

window.onload = function () {
  var i;
  var c;
  var list = document.getElementById(\'list\');
  
  for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第 i 个子节点
    console.log(c.innerHTML); 
  }
}

3.5 练习

对以下list 按 li 文本的字符串顺序排列 DOM。


<ol id=\"test-list\">
  <li class=\"lang\">Schemeli>
  <li class=\"lang\">JavaScriptli>
  <li class=\"lang\">Pythonli>
  <li class=\"lang\">Rubyli>
  <li class=\"lang\">Haskellli>
ol>

思路：先获取所有的字符串，排序后，再修改文本值。

window.onload = function () {
  var ol = document.getElementById(\"test-list\");
  var arr = [];
  var li = ol.getElementsByClassName(\"lang\");
  
  // 遍历
  for(let i = 0; i < li.length; i++){
    let liElementText = li[i].innerHTML;
    arr.push(liElementText);
  }
  console.log(arr); // output: [\"Scheme\",  \"JavaScript\", \"Python\", \"Ruby\", \"Haskell\"]
  arr.sort();
  
  // 修改值
  for(let i = 0; i < arr.length; i++){
    let liElementCollection = document.getElementsByClassName(\"lang\")
    liElementCollection[i].innerText = arr[i];
  }
}

执行后，新的 html如下：

<ol id=\"test-list\">
    <li class=\"lang\">Haskellli>
    <li class=\"lang\">JavaScriptli>
    <li class=\"lang\">Pythonli>
    <li class=\"lang\">Rubyli>
    <li class=\"lang\">Schemeli>
ol>

四、删除 DOM 节点

删除节点时需要获取当前节点和它的父节点。

调用父节点的 removeChild方法删除节点。

<div id=\"parent\">
    <p>Firstp>
    <p>Secondp>
div>

var parent = document.getElementById(\'parent\');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

getElementById方法的返回值 Element 是实时更新的，删除第一个节点后，length 就变为 1，因此第二个删除就越界了。

练习

    
    <ul id=\"test-list\">
        <li>JavaScriptli>
        <li>Swiftli>
        <li>HTMLli>
        <li>ANSI Cli>
        <li>CSSli>
        <li>DirectXli>
    ul>

目的：留下

JavaScript

、HTML、CSS，其他删除。

window.onload = function () {
    let ulElement = document.getElementById(\'test-list\');
    ulElement.removeChild(ulElement.children[1]);
    ulElement.removeChild(ulElement.children[2]);
    ulElement.removeChild(ulElement.children[3]);
}