HTML DOM(文档对象)

HTML DOM(文档对象)

HTML DOM(文档对象模型):每个部分都是一个节点:

  • 文档本身是一个节点
  • 所有的HTML元素是一个节点
  • 所有元素的属性是一个节点、
  • 所有的HTML内的文本是一个节点
  • 所有的注释是一个节点

![](C:\Users\wuyichen\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()  修改属性节点
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值