Web Api · DOM

写在前面

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

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

DOM操作

定位DOM

  

    
JavaScript
    
Java
  
  

    
Python
    
Ruby
    
Swift
  
  

    
Scheme
    
Haskell
  

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

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

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

更新DOM

  
javascript
  
Java

// 获取
javascript
节点:
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.

JavaScript

    
Java
    
Python
    
Scheme

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

eg2.

    
Java
    
Python
    
Scheme

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

eg3.

    
Java
    
Python
    
Scheme

// 在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.

    
Scheme
    
JavaScript
    
Python
    
Ruby
    
Haskell

// 按字符串顺序重新排序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

    
JavaScript
    
Swift
    
HTML
    
ANSI C
    
CSS
    
DirectX

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