本文系统介绍了 JavaScript 中通过 DOM 控制 HTML 元素的核心方法。涵盖 getElementsByName、getElementsByTagName 等获取方式，以及 createElement、insertBefore、removeChild 等节点操作，同时解析 getAttribute 与 setAttribute 属性管理，帮助开发者掌握动态修改网页结构的基础技能。
获取元素：名称与标签名
1. getElementsByName()：用于获取具有指定 name 属性的元素集合。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
示例如下：
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<script>
function getName(){
var count=document.getElementsByName("pn");
alert(count.length);
var p=count[2];
p.innerHTML="world";
}
</script>
运行结果：控制台打印出数字“3”，并弹出一个提示框显示“3”。点击确定后，页面中第三个元素的文本内容更新为“world”，最终界面显示内容为“hello hello world”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··
2. getElementsByTagName()：用于获取指定标签名的元素集合。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例如下：
<p>hello</p>
<p>hello</p>
<p>hello</p>
<script>
function getName(){
var count=document.getElementsByTagName("p");
alert(count.length);
var p=count[2];
p.innerHTML="world";
}
</script>
运行结果：控制台打印出数字“3”，并弹出一个提示框显示“3”。点击确定后，页面中第三个元素的文本内容更新为“world”，最终界面显示内容为“hello hello world”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
元素属性：获取与设置
3. getAttribute()：用于获取指定元素的属性值。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例如下：
<a id="aid" title="得到a的标签属性"></a>
<script>
function getAttr1(){
var anode=document.getElementById("aid");
var attr=anode.getAttribute("id");
alert("a的ID是:"+attr);
}
function getAttr2(){
var anode=document.getElementById("aid");
var attr=anode.getAttribute("title");
alert("a的title内容是："+attr);
}
getAttr1();
getAttr2();
</script>
运行结果：首先弹出提示框显示“a的ID是：aid”，点击确定后，再次弹出提示框显示“a的title内容是：得到a的标签属性”。
4. setAttribute()：用于设置或修改元素的属性值。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例如下：
<a id="aid2">aid2</a>
<script>
function setAttr(){
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a的title属性");
var attr=anode.getAttribute("title");
alert("动态设置的title值为："+attr);
}
setAttr();
</script>
运行结果：弹出提示框显示“动态设置的title值为：动态设置a的title属性”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
节点关系：子节点与父节点
5. childNodes()：用于访问元素的子节点列表。
~~~~~~~~~~~~~~~~~~~~~~~~~~··
示例如下：
<ul><li>1</li><li>2</li><li>3</li></ul>
<script>
function getChildNode(){
var childnode=document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType);
}
getChildNode();
</script>
运行结果：控制台依次打印出“.1”、“.2”、“.3”，并弹出对话框显示“3”。点击确定后，再次弹出对话框显示“1”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6. parentNode()：用于访问元素的父节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·
示例如下：
<div>
<p id="pid"></p>
</div>
<script>
function getParentNode(){
var div=document.getElementById("pid");
alert(div.parentNode.nodeName);
}
getParentNode();
</script>
运行结果：弹出提示框显示“DIV”，表示该元素的父节点标签名为 div。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
节点创建：元素与文本
7. createElement()：用于创建一个新的元素节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例如下：
<script>
function createNode(){
var body=document.body;
var input=document.createElement("input");
input.type="button";
input.value="按钮";
body.appendChild(input);//插入节点
}
createNode();
</script>
运行结果：页面中成功渲染出一个按钮。
~~~~~~~~~~~~~~~~~~~~~~~~~~~
8. createTextNode()：用于创建一个新的文本节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例如下：
<script>
function createNode(){
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
}
createNode();
</script>
代码分析：该示例首先创建了一个新的 div 元素，并为其添加了 class 属性，值为“message”。接着，创建了一个文本节点，并将其追加到刚才创建的 div 元素中。最后，将这个包含文本的 div 元素添加到文档的 body 中，从而在浏览器中展示新创建的元素及其文本内容。
运行结果：页面中显示“hello world”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
节点操作：插入与删除
9. insertBefore()：用于在指定节点之前插入一个新节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
示例如下：
<div id="div">
<p id="pid">p元素</p>
</div>
<script>
function addNode(){
var div=document.getElementById("div");
var node=document.getElementById("pid");
var newnode=document.createElement("p");
newnode.innerHTML="动态插入一个p元素";
div.insertBefore(newnode,node);
}
addNode();
</script>
运行结果：控制台打印出“动态插入一个p元素”。
页面中显示“p元素”。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10. removeChild()：用于从 DOM 树中删除一个子节点。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·
示例如下：
<div id="div">
<p id="pid">p元素</p>
</div>
<script>
function removeNode(){
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[1]);
}
removeNode();
</script>
运行结果：页面中不再显示相关元素，即界面什么也没显示。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
网页尺寸：高度属性
11. offsetHeight：用于获取网页元素的可视高度。
12. scrollHeight：用于获取网页元素的滚动高度。
~~~~~~~~~~~~~~~~~~~~~~~~~~~·
示例如下：
<script>
function getSize(){
var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
var height=document.documentElement.offsetHeight||document.body.offsetHeight;
alert(width+","+height);
}
getSize();
</script>
显示结果：（此处对应图片展示具体数值）
本文主要介绍了如何使用 JavaScript DOM 来控制 HTML 元素，内容涵盖 DOM 基础及 HTML 元素操作，文章来自网络，仅供参考。