JavaScript HTML DOM 元素

一、JavaScript 访问 DOM 元素
利用以下 JavaScript 方法获取 DOM 信息：
document.getElementById() 方法：通过 id 查找 HTML 元素

var t = document.getElementById("id");

document.getElementsByName() 方法：通过 name 查找 HTML 元素

var t = document.getElementByName("name");

document.getElementsByTagName() 方法：通过标签名查找 HTML 元素

var x = document.getElementsByTagName("p");

查找所有 p标签 元素
document.getElementsByClassName() 方法：通过类名查找 HTML 元素

var x = document.getElementsByClassName("intro");

返回包含 class=“intro” 的所有元素的列表。
通过 CSS 选择器查找 HTML 元素：
查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，使用 querySelectorAll() 方法。

var x = document.querySelectorAll("p.box");

返回 class=“box” 的所有 p 元素列表。
二、JavaScript 修改 DOM 元素：
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。

document.getElementById(id).innerHTML = "Hello"

修改元素样式：

<script type="text/javascript">
   //获取 id="title" 的元素        
    var title = document.getElementById("title");     
   
    //修改其颜色        
    title.style.color = "red";        

    //修改其字体大小        
    title.style.fontSize = "46px";    
</script>

改变属性的值
如需修改 HTML 属性的值，请使用如下语法：

document.getElementById(id).attribute = new value

增加或删除 HTML 元素
增加HTML元素
appendChild()：把节点插入到父节点的末尾

document.body.appendChild(div);   //把div插入到body中，并且位于末尾

insertBefore()：把节点插入到父节点的某个兄弟节点的前面。

var P = createElement('p');  //创建一个p节点
document.body.insertBefore(P,div); //把p节点插入到div的前面

删除 HTML 元素：
删除DOM节点的方法是removeChild()。

document.body.removeChild(P);  //删除body中的p节点

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);