复习前端基础知识6之JavaScript2
根据 id 获取页面中的某个节点
获取 div 节点对象
document 对象是 js 内置对象,可以直接拿来使用
代表的是浏览器窗口中的文档或者对象
DOM 树是一个 document 的一个 html 文档
获取 dom 树节点,可以根据 id 来获取
window 对象也是内置对象,可以直接拿来使用
代表的是当前浏览器的窗口
html 中的节点
<div id="mydiv"> 我是一个盒子对象</div>
<input type="text" id = "username" οnclick="getDivElt()" name="" />
<input type="button" value="获取div节点元素" onclick="getDivElt()" />
需要获取 div 节点,就需要通过 id 来获取
js 代码如下:
function getDivElt(){
//alert(11111)
var mydivElt = document.getElementById("mydiv");
console.log(mydivElt);
var usernameElt = document.getElementById("username");
console.log(usernameElt);
}
innerHTML 和 innerText 的区别
<div id="mydiv"> </div>
<input type="button" value="设置div的内容" onclick="setContent()" name="">
js 代码获取并设置 div 内容,innerHTML会将""当中的 html 代码解释并执行,但是 inner Text 会将“”中的 html 代码当作文本输出
给button注册一个点击事件,当点击时发生js中的函数,这个函数的作用就是给div赋值。
这里非常值得注意的是:getElementById(“”)括号中的双引号千万不要忘记!!!!!
后面括号中的值即为要设置的盒子的id值。
function setContent(){
var divElt = document.getElementById("mydiv");
divElt.innerHTML = "<font color='red' size='4'>用户名不能为空</font>";
}
但是 inner Text 会将“”中的html代码当作文本输出,
即下面代码输出的是:"<font color=‘red’ size=‘4’>用户名不能为空</font>"
unction setContent(){
var divElt = document.getElementById("mydiv");
divElt.innerText = "<font color='red' size='4'>用户名不能为空</font>";
}
value属性
value是一个属性,并不是一个方法
将id设置为username,给button注册一个点击事件,当发生事件时,就可以得到用户输入的用户名
用户名<input type="text" name="username" id="username" value="" />
<input type="button" value="获取用户名" name="" onclick="getUsername()" />
当发生点击事件时,则发生下列函数,作用是获取用户的文本框对象,利用 alert 弹窗检测成功与否。输出的 username 即为用户输入 type 的值
function getUsername(){
var usernameElt = document.getElementById("username")
alert(username)
}
二
function getUsername(){
var username = usernameElt.value
alert(username)
}
三
function getUsername(){
alert(document.getElementById("username").value)
}
获取节点、修改type属性,获取节点之后,可以修改所有属性,即 html 中原本的属性也可以修,此处原本为输入框,可以改成复选框,即改变 type 的属性值,不是单纯的赋值。
function getUsername(){
var usernameElt = document.getElementById("username")
usernameElt.type = "checkbox"
}
直接赋值,先注册函数,获取节点,执行事件。
function getUsername(){
var usernameElt = document.getElementById("username")
usernameElt.value = "疯子今天学习了"
}
复选框的取消或全选
html 代码,先设置复选框设置 id 和函数事件名
<input type="checkbox" id="fistcheck" onclick="checkAll()"/><br>
<input type="checkbox" name="aihao" id="" value="1" />抽烟<br>
<input type="checkbox" name="aihao" id="" value="2" />和牛<br>
<input type="checkbox" name="aihao" id="" value="3" />喝酒<br>
<input type="checkbox" name="aihao" id="" value="4" />烫头<br>
<input type="checkbox" name="aihao" id="" value="5" />跳舞<br>
<input type="checkbox" name="aihao" id="" value="6" />唱歌<br>
<input type="checkbox" name="aihao" id="" value="7" />合格<br>
<input type="checkbox" name="aihao" id="" value="8" />订单<br>
js 代码
function checkAll(){
// 获取fistcheck这个元素,即第一个复选框对象
var fistcheckElt = document.getElementById("fistcheck")
// 拿到这个元素之后,接着获取checkbox所有元素
var aihaosChks = document.getElementsByName("aihao")
// 然后进行for循环,对数组进行遍历
for (var i = 0; i<aihaosChks.length; i++){
aihaosChks[i].checked = fistcheckElt.checked
}
}
function binkclick(){
var aihaoChks = document.getElementsByName("aihao")
for (var i = 0; i<aihaoChks.length; i++) {
aihaoChks[i].onclick = function(){
// 当总数和选中的总数量相等,第一个和其他都是选中的
var count = aihaoChks.length
// 获取选中的数量
var checkedCount = 0
for (var i = 0; i<aihaoChks.length; i++){
if(aihaoChks[i].checked){
checkedCount++;
}
}
document.getElementById("fistcheck").checked = (count == checkedCount)
}
}
}
表单验证
html 部分
<form action="http://localhost:8080/oa/save" method="get">
<!-- this是当前文本框对象。 -->
用户名<input type="text" name="username" id="username" onblur="checkNema(this.value)" />
<span id="nameerror" style="color:red; font-size: 12px;"></span>
<br>
<input type="submit" value="保存" name="">
</form>
js 代码部分
<script type="text/javascript">
function checkNema(username){
// 去除字符串的前后空白
username = username.trim()
// alert(username)
// 判断用户名是否为空
if(username == ""){
var nameerror = document.getElementById("nameerror")
nameerror.innerHTML = "用户名不能为空"
}
else{
// 用户名不能为空
// 判断长度是否合法
if (username.length < 6 || username.length >14 ) {
var nameerror = document.getElementById("nameerror")
nameerror.innerHTML = "用户名长度不能小于6,不能大于14"
}else{
// 说明用户名长度是合法的
// 只能由数字和字母组成
var RegExp = /^[0-9a-zA-Z]+$/
var ok = RegExp.test(username)
if (ok){
// 合法
}else {
// 非法
var nameerror = document.getElementById("nameerror")
nameerror.innerHTML = "用户名只能由数字或者字母组成"
}
}
}
}
function clearError(){
var nameerror = document.getElementById("nameerror")//注意:括号中的双引号,千万不要忘记!!!!!!
nameerror.innerHTML = ""
}
</script>