欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML DOM（文档对象）

程序员文章站 2022-07-04 20:07:13
...

HTML DOM（文档对象）

HTML DOM（文档对象模型）：每个部分都是一个节点：

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

![](C:\Users\*chen\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()  修改属性节点

上一篇： Vue相关基础知识(指令、过滤器、监听器)

下一篇： poj Cow Marathon树的直径

推荐阅读