JavaScript 操作 DOM 元素的常见方法总结
本文详细总结了JavaScript中操作DOM元素的常见方法。内容涵盖使用getElementById和getElementsByTagName获取元素，解决脚本加载顺序问题的两种方案，以及通过点语法和方括号语法读写元素属性。同时介绍了利用innerHTML读取或修改标签内部内容的技巧，旨在帮助开发者掌握前端基础操作。
本示例详解JavaScript操作元素的常用方式。供读者参考学习，主要内容包括：
获取元素的两种常用方式
元素获取方式一
利用内置对象document的getElementById方法，可获取页面中设置了id属性的元素，返回结果为HTML对象，将其赋值给变量，例如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
若上述代码置于元素上方执行，则会引发错误。因页面自上而下加载执行，获取元素div1时该元素尚未加载。解决此问题有两种方案：
方案一：将JavaScript代码置于页面底部
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
方案二：将JavaScript代码置于window.onload触发的函数内，确保获取元素的语句在页面加载完成后执行，从而避免错误。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
元素获取方式二
利用内置对象document的getElementsByTagName方法，可获取页面中特定标签，返回结果为节点集合（非数组），但可通过下标方式操作该集合中的标签元素。
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
alert(aLi.length);
aLi[0].style.backgroundColor = 'gold';
}
</script>
....
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
元素属性的读写操作
元素属性操作
获取页面元素后，可对元素的属性进行操作，包括读取和设置属性。
属性操作方法
1、使用“.”操作符 2、使用“[ ]”操作符
属性命名规范
1、HTML属性与JS属性写法一致 2、“class”属性在JS中写作“className” 3、“style”属性中的带横杠属性需转换为驼峰式，例如：“font-size”转换为“style.fontSize”
通过“.”操作符操作属性：
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="link1">传智播客</a>
通过“[ ]”操作符操作属性：
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var sVal1 = oInput1.value;
var sVal2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[sVal1] = sVal2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="link1">传智播客</a>
使用innerHTML处理标签内容
innerHTML
innerHTML可用于读取或写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var sTxt = oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" >传智播客<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>
感兴趣的用户可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述内容对大家JavaScript程序设计有所帮助。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部：scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09