JavaScript数据校验
DOM中一切皆为节点
- 元素节点：html标签为元素节点
- 文本节点：标签中的内容为文本节点
- 属性节点：标签中的属性称为属性节点
网页中如何使用JavaScript
- head部分
- 包含函数的脚本位于文档head部分，这样我们就可以确保在调用函数前，脚本已经载入了。
- body部分
- 执行位于body部分的脚本
- 外部JavaScript
- 编写外部.js文件，在页面引入，在script标签的src属性中指定外部的js文件的路径
- 注意：js文件中不能有script标签，js文件中是直接写js代码的
获取元素节点
- 根据id查询元素节点，返回一个节点对象并且用
inputElement变量来接收
var inputElement = document.getElementById("id值");
注意：在js中，所有声明变量都用var表示
<body>
<form action="test.html" name="form1" method="post">
<input type="text" name="username" value="国庆70周年" id="tid"/>
<input type="button" name="ok" value="保存"/>
</form>
<script type="text/javascript">
//输出<input type="text" name="username" value="国庆65周年" id="tid"/>标签value的属性值
var Element = document.getElementById("tid")
alert(Element.value);
</script>
</body>
var n = inputElement.value;获取元素节点中的值并且用n变量来接收
2. alert("弹出框中显示的内容")
3. 根据name属性查询元素节点，返回一个节点集合
var inputElement = document.getElementByName("name值")
<body>
<form action="test.html" name="form1" method="post">
<input type="text" name="tname" value="国庆70周年_1" id="tid_1"/>
<input type="text" name="tname" value="国庆70周年_2" id="tid_2"/>
<input type="text" name="tname" value="国庆70周年_3" id="tid_3"/>
<input type="button" name="ok" value="保存"/>
</form>
<script type="text/javascript">
//通过元素的name="tname"属性获取所有元素的引用
var Elements = document.getElementsByName("tname");
//测试该数据的长度
alert(Elements.length);
//遍历元素,输出所有value属性的值
for(var i=0;i<Elements.length;i++){
alert(Elements[i].value);
}
</script>
</body>
- 根据标签的名称来查询元素节点，返回一个节点集合
可以用document对象来调用，还可以用父节点来调用
option如果没有写value属性，那么value属性值默认为文本内容
获取本网页中所有标签名叫option的标签：var options = document.getElementsByTagName("option").
<body>
<form action="test.html" name="form1" method="post">
<input type="text" name="tname" value="国庆70周年_1" id="tid_1"/>
<input type="text" name="tname" value="国庆70周年_2" id="tid_2"/>
<input type="text" name="tname" value="国庆70周年_3" id="tid_3"/>
<input type="button" name="ok" value="保存"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员" selected="selected">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
<script type="text/javascript">
// 获取所有的input元素,返回值是数组
// var inputs = document.getElementsByTagName("input");
//
// 测试长度
// alert(inputs.length)
// 遍历输出value的值
// for(var i=0;i<inputs.length;i++){
// alert(inputs[i].value);
// }
// 输出type="text"中value属性的值不包含按钮(button)
// for(var i=0;i<inputs.length;i++){
// if(inputs[i].type=="text"){
// alert(inputs[i].value);
// }
// }
//输出所有下拉选项id="edu"中option标签中value属性的值
// var options = document.getElementById("edu");
// for(var i=0;i<options.length;i++){
// alert(options[i].value);
// }
// vor(var i=0;i<options.length;i++){
// if(){
// alert(options[i].value);
// }
// }ar options = document.getElementsByTagName("option");
// 输出所有下拉选项内容
// var optionss = document.getElementsByTagName("option");
// for(var i=0;i<optionss.length;i++){
// alert(optionss[i].value);
// }
// 输出下拉选项选中的值 不写
var Element = document.getElementById("edu").getElementsByTagName("option")
for(var i=0;i<Element.length;i++){
alert(Element[i].firstChild.nodeValue);
}
</script>
</body>
事件
当事件发生后会触发该事件中的功能
- js中如何定义函数
function 函数名(a,b,c...){}
调试时可以使用console.log("").
onload=""表示页面加载完毕后执行 - 事件：
- oblur：元素失去焦点
- onclick：鼠标点击某个对象
- onfocus：元素获得焦点
- onkeydown：某个键盘的键被按下
- onkeyup：某个键盘的键被松开
- onload：某个页面或图像被完成加载
- onchange：改变事件
获取文本节点
var aElement = document.getElementByTagName("a")[0];- 获取a节点下的第一个子节点：
var aText =aElement.firstChild; - 获取最后一个子节点：
.lastChild; - 获取节点的内容并在后台显示：
console.log(aText.nodeValue);- 元素节点返回null、属性节点返回属性的值、文本节点返回文本的内容
- 获取元素节点下的所有子节点：
childNodes nodeName获取节点的名称，元素节点调用返回元素的名称、属性节点调用返回属性名称、文本节点调用返回#text字符串nodeType获取节点的类型，元素节点调用返回1、属性节点调用返回2、文本节点调用返回3parentNode调用节点的父节点
替换节点
replaceChild():把一个给定父元素李的子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
方法
.getAttribute("属性名")：获取属性值
.getAttribute("属性名","属性值")：设置属性值
<body>
您喜欢的城市:<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fankong">反恐<p>精英</p></li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
</body>
<script type="text/javascript">
//给这个<li id="cq" value="chuanqi">传奇</li>元素节点增加一个属性name="chuanqi"
document.getElementById(cq).setAttribute("name","chaunqi");
</script>
创建节点
document.createElement();：创建元素节点
document.createTextNode();：创建文本节点
document.appendChild();追加子节点
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
</body>
<script type="text/javascript">
//在<ul>标签下增加节点<li id="tj" value="tianjin">天津</li>
var li = document.createElement("li");
li.setAttribute("id","tj");
li.setAttribute("value","tianjin");
var tjText = document.createTextNode("天津");
li.appendChild(tjText);
document.getElementById("city").appendChild(li);
</script>
</html>