Web-Api-DOM

写在前面

对应于“增删改查”，对于 DOM 的操作大致上可以分为 4 类：

• 定位 DOM：getElementById、querySelector 等方法（查）
• 更新 DOM：innerText、innerHTML、textContent 等（改）
• 插入 DOM：appendChild、insertBefore 等方法（增）
• 删除 DOM：removeChild（删）

DOM 操作

定位 DOM

<div id="test-div">
  <div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

// 选择 <p>JavaScript</p>:
var js = document.getElementById('test-p');

// 选择 <p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.querySelectorAll('.c-red.c-green p');

// 选择 <p>Haskell</p>:
var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

更新 DOM

<div id="test-div">
  <p id="test-js">javascript</p>
  <p>Java</p>
</div>

// 获取 <p>javascript</p> 节点:
var js = document.getElementById('test-js');

// 修改文本为 JavaScript:
js.innerText = 'JavaScript';

// 修改 CSS 为: color: #ff0000, font-weight: bold
js.style.color = '#ff0000';
js.style.fontWeight = 'bold';

插入 DOM

eg1.

<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

// 移动 JavaScript 节点到 list 里
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);

eg2.

<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

// 插入节点 p（innerText = JavaScript）到 list 里
var list = document.getElementById('list');
var p = document.createElement('p');
p.id = 'javascript'
p.innerText = 'JavaScript';
list.appendChild(p);

eg3.

<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

// 在 Java 和 Python 之间插入 JavaScript
var list = document.getElementById('list');
var ref = document.getElementById('python');
var p = document.createElement('p');
p.id = 'javascript';
p.innerText = 'JavaScript';
list.insertBefore(p,ref)

eg4.

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

// 按字符串顺序重新排序 DOM 节点
var list = document.getElementById('test-list');
var arr = Array.from(list.children);
arr.sort((a,b) => {if(a.innerText > a.innerText) {return 1;} else if(a.innerText < b.innerText) {return -1;} else {return 0;}
})
for (let i = 0; i < list.children.length; i++) {list.appendChild(arr[i]);
}

删除 DOM

<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

// 从 ul 中删除与 web 开发技术无关的 li
var parent = document.getElementById('test-list');
var refArr = ['Swift','ANSI C','DirectX'];
for (let el of refArr) {for (let li of parent.children) {if (li.innerText === el) {parent.removeChild(li);
            break;
        }
    }
}

NodeList 和 HTMLCollection

1. 节点类型

   • NodeList的类型有：Element、Text、Comment、Document 等 12 类；
   • HTMLCollection的类型只有 Element 一种

2. 获得方法

   • NodeList由 Node.childNodes 和 document.querySelectorAll()返回；
   • HTMLCollection由 Node.children、document.getElementsByClassName()和 getElementsByTagName()返回

3. 动态 vs. 静态

   • ++Node获取方法：++
   • document.getElementById —> 动态 Node
   • doucment.querySelector —> 动态 Node
   • ++NodeList获取方法：++
   • Node.childNodes —> 动态 NodeList
   • document.querySelectorAll() —> 静态 NodeList
   • ++HTMLCollection获取方法：++
   • Node.children —> 动态 HTMLCollection
   • document.getElementsByClassName —> 动态 HTMLCollection

4. 原型对象方法

   • HTMLCollection比 NodeList 在__proto__上多了一个 namedItem()方法

引用 HTMLCollection vs. NodeList

• HTMLCollection 和 NodeList 的共同点显而易见：

  • 都是类数组对象，都有 length 属性
  • 都有共同的方法：item，可以通过 item(index)或者 item(id)来访问返回结果中的元素
  • 都是实时变动的（live），document 上的更改会反映到相关对象上（例外：document.querySelectorAll 返回的 NodeList 不是实时的）

• HTMLCollection 和 NodeList 的区别是：

  • NodeList 可以包含任何节点类型，HTMLCollection 只包含元素节点（elementNode），elementNode 就是 HTML 中的标签
  • HTMLCollection 比 NodeList 多一项方法：namedItem，可以通过传递 id 或 name 属性来获取节点信息