HTML DOM(文档对象)
程序员文章站
2022-07-04 20:07:13
...
HTML DOM(文档对象)
HTML DOM(文档对象模型):每个部分都是一个节点:
- 文档本身是一个节点
- 所有的HTML元素是一个节点
- 所有元素的属性是一个节点、
- 所有的HTML内的文本是一个节点
- 所有的注释是一个节点
![](C:\Users\*chen\Documents\image(不可删)\HTML DOM文档模型.png)
Document对象
每个载入浏览器的HTML文档都能看成一个document对象。他可以能够让我们对每个HTML元素进行访问。
常用方法:
-
document.getElementById():返回指定id的对象
<head> <title>Title</title> <script> function change() { var chr=document.getElementById("pp"); chr.style.color="red"; } </script> </head> <body> <span id="pp">你好</span> <input type="button" value="修改" onclick="change()"> </body> 通过获取span标签ID来得到span标签对象,从而可以设置span标签的属性
-
document。getElementsByName():返回指定名称的对象的集合
<head>
<title>Title</title>
<script>
function change() {
var chr=document.getElementsByName("hang");
/*
这里也可以通过设置table标签的id然后通过document.getElementById("id").rows
获取表格中每一行
* */
for(var i=0;i<chr.length;i++){
if(i%2==0){
chr[i].bgColor="red";
}else{
chr[i].bgColor="yellow";
}
}
}
</script>
</head>
<body>
<table border="1">
<tr name="hang">
<td>第一行</td>
</tr>
<tr name="hang">
<td>第二行</td>
</tr>
<tr name="hang">
<td>第三行</td>
</tr>
</table>
<input type="button" value="修改" onclick="change()">
</body>
获取每一个对象返回一个集合,
Element对象:
表示的是HTML元素。
-
innerHTML:设置或获取对象起始和结束标签之间的内容
<script> function show(){ var spanID=document.getElementById("test"); spanID.innerHTML="用户名不能小于6位!"; } </script> <body> <%-- onfocus 获取元素的焦点(当鼠标点击输入框的时候触发函数事件)--%> 用户名:<input type="text" onfocus="show()"><span id="test"></span> </body>
Event对象
插入HTML标签中,定义事件的行为从而触发函数事件。
- onfocus:元素获得焦点之后就会触发事件
- onclick:单击某个按钮触发事件
- onblur:当失去焦点就会触发事件
- onkeyup:某个鼠标按键被松开之后触发
- onload:页面或者图像加载完成之后立即发生
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>js检验表单优化1</title>
<script>
/*
function show() {
var altername=document.getElementById("spanAlter");
altername.innerHTML="<font color='red'>用户名不能小于6位</font>";
}*/
//将上面的提示代码改进,设置一个通用提示
/*
* innerHTML:获取对象的内容 或 向对象插入内容(获取标签的id,并设置其中的内容)
* 和innerTEXT相比:inner HTML可以插入HTML代码。
* */
function show(spanID,msg) {
var inFor=document.getElementById(spanID);
inFor.innerHTML=msg;
}
function checkName() {
var uName=document.getElementById("username").value;
var alterName =document.getElementById("spanAlter");
if (uName.length<6){
alterName.innerHTML="对不起,用户名太短!";
return false
}else{
alterName.innerHTML="恭喜你!用户名可以使用!";
return true
}
}
function checkPsword() {
var uPass=document.getElementById("password").value;
var alterPass=document.getElementById("spanWord");
if(uPass.length<6){
alterPass.innerHTML="对不起密码过于简单!";
return false
}else{
alterPass.innerHTML="密码设置成功!";
return true
}
}
function checkRePass() {
var uPass=document.getElementById("password").value;
var rePass=document.getElementById("rePassword").value;
var alterRePass=document.getElementById("spanRePass");
if(rePass==uPass){
alterRePass.innerHTML="恭喜你!两次密码一致";
return false;
}else {
alterRePass.innerHTML="密码不一致,请重新输入!";
return true;
}
}
function checkForm() {
var flag=checkRePass() & checkPsword() & checkName();
return flag;
}
</script>
</head>
<body>
<%--
Event事件:点击某个 HTML 元素时启动一段 JavaScript
onfocus:元素获得焦点
onblur:元素失去焦点。
onkeyup:某个键盘按键被松开。
--%>
<form action="检验成功.jsp" return onsubmit="checkForm()">
<%--onfocus=“show()”表示当用户点击输入框时会出发show这个函数 其他同理--%>
用户名:<input type="text" id="username" onblur="checkName()" onfocus="show('spanAlter','用户名不能小于6位')"
onkeyup="checkName()"><span id="spanAlter"></span>
<br>
密码:<input type="password" id="password" onblur="checkPsword()" onfocus="show('spanWord','密码不能小于6位')" onkeyup="checkPsword()"/>
<span id="spanWord"></span>
<br>
确认密码:<input type="password" id="rePassword" onblur="checkRePass()" onfocus="show('spanRePass','两次密码必须一致')" onkeyup="checkRePass()">
<span id="spanRePass"></span>
<br>
<input type="submit" value="注册">
</form>
</body>
</html>
一些HTML DOM操作
一些常用的 HTML DOM 方法:
getElementById(id) - 获取带有指定 id 的节点(元素)
appendChild(node) - 插入新的子节点(元素)
removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点
查找节点:
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点:
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点:
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点:
setAttribute() 修改属性
setAttributeNode() 修改属性节点
下一篇: poj Cow Marathon树的直径