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
属性,表示获取/设置起始标签和结束标签中的文本