JS DOM操作 - 爱码网

一.前言

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二.查找 HTML 元素

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

例;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
<div>该实例展示了 <b>getElementsByClassName</b> 方法!</div>
<p id="value">该实例展示了  <b>getElementById</b> 方法</p>
<script>
    x=document.getElementsByClassName("intro");
    y=document.getElementsByTagName('div');
    z=document.getElementById("value");
    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
    document.write('<p>文本来自div标签' + y[0].innerHTML + "</p>");
    document.write('<p>文本来自id为value的内容;' + z.innerHTML + "</p>");
</script>
</body>
</html>

查找HTML元素