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属性来获取节点信息