JavaWeb笔记---JavaScript基础知识3(js中的DOM)

关注

原创最新推荐文章于 2026-05-27 10:22:25 发布 244 阅读 AI 写同款· GEO 优化 ›

利用dom4j--读取xml文件利用dom4j--读取xml文件。代码简洁易懂。立即下载

1.DOM模型
DOM 全称是 Document Object Model 文档对象模型
就是把文档中的标签，属性，文本，转换成为对象来管理
1.1Document 对象
在这里插入图片描述
Document 对象的理解：
第一点：Document 它管理了所有的 HTML 文档内容
第二点：document 它是一种树结构的文档。有层级关系
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过 document 访问所有的标签对象
什么是对象化?
在Java中

class Person{
		String name;
		int age;
		String gender;
		 public void eat(){函数体}
		 public void play(sport){ sout("我喜欢玩儿" + sport);}}

在js中:

<body>
<div id="div01">div01</div>
</body>

当我们给div标签对象化后,可以得到
class Dom{
private String id; // id 属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容(包括中间的标签)
}

1.2Document 对象中的方法介绍
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement(tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
注：id>name>tagname(原因很简单:id少,tagname最多,选择后你还需要进行筛选)
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

1.3getElementById 方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
                需求:用户点击了校验按钮,获取输出框中的内容,然后验证其是否合法,
                验证的规则是:必须有字母数字下划线组成,并且长度为5-12
                 */
        //window.onload:程序运行时就回家再函数
        window.onload = function(){
            var ipt = document.getElementById("123");
            var val = ipt.value;
            alert(val);//查看输入框中的值:123
            var name  = document.getElementsByName("校验");//得到name属性为"校验"的对象;
            name[0].onclick = function () {
                if (val == 456){
                    alert("用户名有效");
                }else{
                    alert("用户名无效");
                }
            }
        }
    </script>
</head>

<body>
    用户名: <input id="123" type="text" value="456"/><br/>
    <button name="校验">校验</button>//通过函数判断用户名输入是否正确
</body>

1.4.getElementsByName

<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// 让所有复选框都选中
// document.getElementsByName(); 是根据 指定的 name 属性查询返回多个标签对象集合
// 这个集合的操作跟数组 一样
// 集合中每个元素都是 dom 对象
// 这个集合中的元素顺序是他们在 html 页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
// checked 表示复选框的选中状态。如果选中是 true ，不选中是 false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
// 全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
// checked 表示复选框的选中状态。如果选中是 true ，不选中是 false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
}
// 反选
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
// if (hobbies[i].checked) {
// hobbies[i].checked = false;
// }else {
// hobbies[i].checked = true;
// }
}
}
</script>
</head>

<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>

1.5getElementsByTagName

<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>

<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>

1.6createElement 方法

<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上
// 标签的内容就是： <div> 国哥，我爱你 </div>
var divObj = document.createElement("div"); // 在内存中 <div></div>
var textNodeObj = document.createTextNode(" 国哥，我爱你"); // 有一个文本节点对象 # 国哥，我
爱你
divObj.appendChild(textNodeObj); // <div> 国哥，我爱你 </div>
// divObj.innerHTML = " 国哥，我爱你 "; // <div> 国哥，我爱你 </div>, 但，还只是在内存中
// 添加子元素
document.body.appendChild(divObj);
}
</script>
</head>

2.节点的常用属性和方法
方法:通过具体的元素节点调用
getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性:
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本