document对象概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript">
/*
DOM模型
DOM 全称是 Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。学习的重点
什么是对象化，将代码封装到对象里面
Document 对象的理解：
第一点：Document 它管理了所的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
最常见的就是 html标签
head标签 body标签
第点：它让我们把所的标签 都 对象化
第四点：我们可以通过 document 访问所的标签对象。
Document对象方法：
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)：返回一个dom对象的集合
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)：返回dom对象集合
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
document.createTextNode("文本内容")：创建一个文本节点
字符串也是属于文本节点的一部分
private String id; id 属性
private String tagName; 表示标签名
private Dom parentNode; 父亲节电
private List<Dom> children; 孩子结点
private String innerHTML; 起始标签和结束标签中间的内容
节点常用的属性和方法：
节点就是标签对象
方法：
通过具体的元素节点调用
getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
*/
</script>
</head>
<body>
</body>
</html>
getElementById函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestGetElementByid</title>
<script type="text/javascript">
/*
getElementById函数:通过id属性获得标签属性
innerHTML属性：表示起始标签和结束标签中的内容，这个属性可读可写
patt对象：正则表达式
test()方法：用于测试某个字符是否匹配我的规则，是就返回true，否则返回false
*/
function fun() {
var usernameObj = document.getElementById("nameuser");
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
var spanobj = document.getElementById("span01");
// innerHTML表示起始标签和结束标签中的内容，这个属性可读可写
// var text = spanobj.innerHTML;
// spanobj.innerHTML = "小智真帅";
if (patt.test(usernameText)){
// alert("您的输入不合法")
spanobj.innerHTML="<img src=\"right.png\" height=\"18\" width=\"18\">";
}else{
// alert("您的输入不合法")
spanobj.innerHTML="<img src=\"wrong.png\" height=\"18\" width=\"18\">";
}
}
</script>
</head>
<body>
用户名<input type="text" id="nameuser" value="zxcv"/>
<span id="span01" style="color: red">
</span>
<button onclick="fun()">校验</button>
</body>
</html>
getElementByName函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestGetElementByName</title>
<script type="text/javascript">
/*
getElemenByName函数:通过name属性获取标签对象
// document.getElementsByName();是根据指定的name 属性查询返回多个标签对象集合
这个集合操作和数组一样，集合的每个元素都是 dom对象
// checked 表示复框的中状态。如果中是true，不中是false
// checked 这个属性可读，可写
*/
// 全
function butfunAll() {
// 需求：让所有复选框都选中
// 这个集合中的元素顺序是他们在html 页面中从上到下的顺序
// checked 表示复框的中状态。如果中是true，不中是false
// checked 这个属性可读，可写
//1.通过name属性获得标签对象集合
var getName = document.getElementsByName("hoby");
//2.通过checked属性修改中状态
//遍历
for (var i = 0; i < getName.length; i++){
getName[i].checked = true;
}
}
// 全不
function butfunNot() {
var getName = document.getElementsByName("hoby");
for (var i = 0; i < getName.length; i++) {
getName[i].checked = false;
}
}
// 反
function bufunfx() {
var getName = document.getElementsByName("hoby");
for (var i = 0; i < getName.length; i++) {
getName[i].checked = !getName[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好
<input type="checkbox" name="hoby" value="java" checked="checked"/>
<input type="checkbox" name="hoby" value="c++"/>
<input type="checkbox" name="hoby" value="c"/>
<input type="checkbox" name="hoby" value="python"/>
<br>
<button onclick="butfunAll()">全</button>
<button onclick="butfunNot()">全不</button>
<button onclick="bufunfx()">反</button>
</body>
</html>
getElementByTagName函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
/*
getElementsByTagName：通过标签名获得标签对象
也是得到一个集合，操作和Name属性的方法类似
*/
//全
function butfunAll() {
// 1.得到标签对象
var inputobj = document.getElementsByTagName("input");
// 通过checked属性修改项状态
for (var i = 0; i < inputobj.length; i++) {
inputobj[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好
<input type="checkbox" name="hoby" value="java" checked="checked"/>
<input type="checkbox" name="hoby" value="c++"/>
<input type="checkbox" name="hoby" value="c"/>
<input type="checkbox" name="hoby" value="python"/>
<br>
<button onclick="butfunAll()">全</button>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test正则表达式</title>
<script type="text/javascript">
/*
正则表达式： -- 检索的时候要想到正则表达式来进行判断
写法：①new RegExg() 创建对象的形式
②/正则表达式主体/修饰符(可)
注意：①空格也是字符
②是大小写之分的
③包含是包含这个情况在里面的，比如说包含一个a，那就是说3个a也是成立的
*/
/*
//是否带小数
function isDecimal(strValue ) {
var objRegExp= /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
//校验是否中文名称组成
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; //定义验证表达式
return reg.test(str); //进行验证
}
//校验是否全由8位数字组成
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; //定义验证表达式
return reg.test(str); //进行验证
}
//校验电话码格式
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
//校验邮件地址是否合法
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
*/
//代码实现
//判断字符串中是否包含这个字符,顺序要一样
//var patt = /de/;
//判断字符串中是包含a,c,d，顺序无要求
//var patt = /[acd]/;
//字符串中是否包含a到z的字母
//var patt = /[a-z]/;
//字符串中是否包含A到Z的字母
//var patt = /[A-Z]/;
//字符串中是否包含0-9的数字
//var patt2 = /[0-9]/;
//字符串中是否 包含 字母，数字，下划线
//var patt2 = /\w/;
//字符串中是否 包含 至少一个a
//var patt2 = /a+/;
//字符串中至少 包含 “零个” 或 多个 a
//var patt2 = /a*/;
//字符串中是否 包含 一个或者零个a
//var patt2 = /a?/;
//字符串中是否包含3个连续的a
//var patt2 = /a{3}/;
//字符串中是否 包含 至少3个连续的a ，最多5个连续的a
//var patt2 = /a{3,5}/;
//字符串中是否 包含 至少3个连续的a
//var patt2 = /a{3,}/;
//字符串中是否以a字母结尾
//var patt2 = /a$/;
//字符串中是否以a字母开头
//var patt2 = /^a/
//要求：字符串中是否*包含* 至少3个连续的a
//var patt2 = /a{3,}/;
//要求:字符串，从头到尾都必须完全匹配
//var patt3 = /^a{3,}$/; //以a开头和结尾，三个连续或多个连续的a，这是一段连续的字符串
//里面的内容全部是a才行
//alert(patt.test("abcde"))
//alert(patt2.test("aeasfaaa23a"))
//alert(patt3.test("aaaabba"))
// 要求：比对密码是数字、字母、下划线
var patt = /^\w{5,12}$/;
var str = "xiaozhi520_"
alert(patt.test(str))
</script>
</head>
<body>
</body>
</html>
createElement函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
/*
createElement函数：创建标签对象
*/
window.onload = function () {
var divobj = document.createElement("div"); //在内存中
//通过innerHTML属性写入内容
var textContent = document.createTextNode("智哥真帅"); //创建一个文本节点
var appendChild = divobj.appendChild(textContent); //添加一个子节点
document.body.appendChild(divobj); //添加一个子节点
}
</script>
</head>
<body>
</body>
</html>
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
