JavaScript-浏览器-DOM-练习题

 

1.请选择出指定条件的节点

如下的HTML结构：

JavaScript

Java

Python

Ruby

Swift

Scheme

Haskell

<!-- HTML结构 -->
<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>

请选择出指定条件的节点：

'use strict';

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

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.getElementsByClassName('c-red c-green')[0].children;
// 选择<p>Haskell</p>:
var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

// 测试:
if (!js || js.innerText !== 'JavaScript') {
    alert('选择JavaScript失败!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
    console.log('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
    console.log('选择Haskell失败!');
} else {
    console.log('测试通过!');
}

注意：

1.children 不是 children()

2.对于getElementByClassName()返回是一个数组，获得第一个正确的为[0]，后续依次类推，

3.只有getElementById()是返回的唯一的

 

2.将字符串顺序重新排序DOM节点

对于一个已有的HTML结构：

1. Haskell
2. JavaScript
3. Python
4. Ruby
5. Scheme

<!-- HTML结构 -->
<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 listchild = document.getElementsByClassName('lang');
for(let i=0;i<listchild.length;i++){
    for(let j=i+1;j<listchild.length;j++){
        if(listchild[i].innerText>listchild[j].innerText){
           list.insertBefore(listchild[j],listchild[i]);
         }
    }
}

通过document.getElementsByTagName等返回的数组属于一个Nodelist，只能使用下标和length等属性，不能使用sort()方法。

 得到的属于类数组，没法直接排序。想要用 sort 需要调用prototype的Arrary 将其进行转化。

var list = document.getElementById('test-list');
var listchild = document.getElementsByClassName('lang');
listchild =Array.prototype.slice.call(listchild).sort(function(a,b){
 return a.innerText>b.innerText? 1: -1
});
listchild.forEach(function(el){
       list.appendChild(el)
})

slice(start,end) 创建一个新数组，进行分隔。

slice 创建一个和原数组一个的数组