操作DOM-廖雪峰JavaScript教程

1、第一次做:
// 选择

JavaScript

:
var js = document.getElementById('test-p');
//document.getElemensByClassName('c-red').firstChild;
//document.getElemensByClassName('c-red')[0];

// 选择

Python

,

Ruby

,

Swift

:
var arr = document.getElemensByClassName('c-red c-green');

// 选择

Haskell

:
var haskell = document.getElemensByClassName('c-green').lastChild;
//document.getElemensByClassName('c-green')[1];

2、

练习
如下的HTML结构:
JavaScript
Java
Python
Ruby
Swift
Scheme
Haskell


JavaScript

Java

Python

Ruby

Swift

Scheme

Haskell

``` 请选择出指定条件的节点:

'use strict';

// 选择

JavaScript

:
//var js = document.getElementById('test-p');
var js = document.querySelector('#test-p');

// 选择

Python

,

Ruby

,

Swift

:
//var arr = document.getElementsByClassName('c-red c-green')[0].getElementsByTagName('p');
var arr =document.querySelectorAll('div.c-red.c-green > p');

// 选择

Haskell

:
var haskell = document.getElementsByClassName('c-green')[1].getElementsByTagName('p')[1];
var haskell = document.querySelectorAll('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') {
alert('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
alert('选择Haskell失败!');
} else {
alert('测试通过!');
}

你可能感兴趣的:(操作DOM-廖雪峰JavaScript教程)