一、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);