Web Api · DOM

1
写在前面

对应于“增删改查”,对于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. 原型对象方法

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

你可能感兴趣的

载入中...