复习前端基础知识6之JavaScript2

复习前端基础知识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>