HTML DOM教程
什么是DOM
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
什么是HTML DOM
HTML DOM 节点
在HTML DOM中，所有事物都是节点。DOM是被视为节点数的HTML。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
DOM 节点树
通过HTML DOM，树中的所有节点均可以通过JavaScript访问。所有HTML节点均可被修改，也可以创建或删除节点。
节点父、子与同胞
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
注意：
DOM处理中的常见错误是希望元素节点包含文本。
在本例中：
DOM教程，元素节点是
,包含值为“DOM教程”的<strong>文本节点</strong>。可通过节点的<strong>innerHTML属性</strong>来访问文本节点的值。</p>
<h3 id="html-dom方法">HTML DOM方法</h3>
<p>方法是我们可以在节点（HTML元素）上执行的动作。</p>
<h4 id="编程接口">编程接口</h4>
<p>可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。</p>
<p>所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。</p>
<p>方法是您能够执行的动作（比如添加或修改元素）。</p>
<p>属性是您能够获取或设置的值（比如节点的名称或内容）。</p>
<h4 id="getelementbyid方法">getElementById()方法</h4>
<p>getElementById() 方法返回带有指定 ID 的元素：</p>
<h6 id="例子">例子</h6>
<pre><code>var element=document.getElementById("intro");
</code></pre>
<h4 id="html-dom对象-方法和属性">HTML DOM对象-方法和属性</h4>
<h5 id="一些常用的-html-dom-方法">一些常用的 HTML DOM 方法：</h5>
<ul>
<li>getElementById(id) - 获取带有指定 id 的节点（元素）</li>
<li>appendChild(node) - 插入新的子节点（元素）</li>
<li>removeChild(node) - 删除子节点（元素）</li>
</ul>
<h5 id="一些常用的-html-dom-属性">一些常用的 HTML DOM 属性：</h5>
<ul>
<li>innerHTML - 节点（元素）的文本值</li>
<li>parentNode - 节点（元素）的父节点</li>
<li>childNodes - 节点（元素）的子节点</li>
<li>attributes - 节点（元素）的属性节点</li>
</ul>
<h3 id="html-dom属性">HTML DOM属性</h3>
<blockquote>
<p>属性是节点的值，您能够获取或设置。</p>
</blockquote>
<h4 id="编程接口-1">编程接口</h4>
<p>可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。</p>
<p>所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。</p>
<p>方法是您能够执行的动作（比如添加或修改元素）。</p>
<p>属性是您能够获取或设置的值（比如节点的名称或内容）。</p>
<h5 id="innerhtml-属性">innerHTML 属性</h5>
<p>获取元素内容的最简单方法是使用 innerHTML 属性。</p>
<p>innerHTML 属性对于获取或替换 HTML 元素的内容很有用。</p>
<pre><code><html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
// 在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。
//innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>
</code></pre>
<h5 id="nodename属性">nodeName属性</h5>
<p>nodeName 属性规定节点的名称。</p>
<ul>
<li>nodeName 是只读的</li>
<li>元素节点的 nodeName 与标签名相同</li>
<li>属性节点的 nodeName 与属性名相同</li>
<li>文本节点的 nodeName 始终是 #text</li>
<li>文档节点的 nodeName 始终是 #document</li>
</ul>
<p><strong>注释：</strong>nodeName 始终包含 HTML 元素的大写字母标签名。</p>
<h5 id="nodevalue-属性">nodeValue 属性</h5>
<p>nodeValue 属性规定节点的值。</p>
<ul>
<li>元素节点的 nodeValue 是 undefined 或 null</li>
<li>文本节点的 nodeValue 是文本本身</li>
<li>属性节点的 nodeValue 是属性值</li>
</ul>
<h4 id="获取元素的值">获取元素的值</h4>
<pre><code><html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
</code></pre>
<h3 id="html-dom访问">HTML DOM访问</h3>
<h4 id="访问-html-元素节点">访问 HTML 元素（节点）</h4>
<p>访问 HTML 元素等同于访问节点</p>
<p>您能够以不同的方式来访问 HTML 元素：</p>
<ul>
<li>通过使用 getElementById() 方法</li>
<li>通过使用 getElementsByTagName() 方法</li>
<li>通过使用 getElementsByClassName() 方法</li>
</ul>
<h3 id="html-dom修改">HTML DOM修改</h3>
<p>修改 HTML = 改变元素、属性、样式和事件。</p>
<h4 id="修改-html-元素">修改 HTML 元素</h4>
<p>修改 HTML DOM 意味着许多不同的方面：</p>
<ul>
<li>改变 HTML 内容</li>
<li>改变 CSS 样式</li>
<li>改变 HTML 属性</li>
<li>创建新的 HTML 元素</li>
<li>删除已有的 HTML 元素</li>
<li>改变事件（处理程序）</li>
</ul>
<h5 id="创建html内容">创建HTML内容</h5>
<p>最简单的使用innerHTML属性。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>上面的段落被一段脚本改变了。</p>
</body>
</html>
</code></pre>
<h5 id="改变html样式">改变HTML样式</h5>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
</code></pre>
<h5 id="创建新的html元素">创建新的HTML元素</h5>
<p>如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
</code></pre>
<p>⏲️20200303181818</p>
<p>🔗<a href="https://www.w3school.com.cn/htmldom/dom_modify.asp" target="_blank">https://www.w3school.com.cn/htmldom/dom_modify.asp</a></p>
<h1 id="待续">待续</h1>
<p><a href="https://www.w3school.com.cn/htmldom/dom_intro.asp" target="_blank">https://www.w3school.com.cn/htmldom/dom_intro.asp</a></p>
浙公网安备 33010602011771号