JavaScript的DOM操作

一个完整的JavaScript实现应该由：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM)组成。
ECMAScript组成由：语法、类型、语句、关键字、保留字、操作符、对象组成。

“关键字”就是 JS 本身已经使用了，具有一定特殊的含义，你就不能再用它们充当变量名啊方法名啊什么的。

“保留字”实际上就是预留的“关键字”，意思是现在虽然现在还不是关键字（也就是本身还不具备特殊含义的），但是未来可能会成为关键字的，你一样是不能使用它们当变量名啊方法名的

<script>元素

async:表示立即下载脚本，但不妨碍页面中的其他操作，只对外部脚本有效（异步）；
charset：表示src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，很少有人用。
3.defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
4.language：已废弃。原来表示编写代码使用的脚本语言。大多数浏览器会忽略它的值。
5。src：可选。表示包含要执行代码的外部文件。
6.type：可选表示编写代码使用的脚本语音的内容类型。

在XHTML中使用不规范的代码处理方案；
使用CData片段；

CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。

//正常用法
<script>
<![CDATA[
function fun(a,b){
     return     a+b
}
]]
</script>
//兼容写法
<script>
//<![CDATA[
function fun(a,b){
     return     a+b
}
//]]>
</script>

获取DOM元素：

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

tip：注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

改变DOM结构或者样式：

 //修改文本
元素名.innerHTML = '内容'；
元素名.innerHtext = '内容'；
//修改样式
元素名.style.color = '#ccc';
元素名.style.fontSize = '15px';

tip:因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

操作DOM

<!-- 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>

<!-- js结构 -->
// 返回ID为'test'的节点：
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

.appendChild()添加
.removeChild()删除
.replaceChild()移动
.cloneNode(true)复制
.createElement()创建
.parentNode查找父节点

JavaScript的DOM操作