HTML DOM（文档对象）

最新推荐文章于 2024-06-24 16:28:05 发布

吴一尘

最新推荐文章于 2024-06-24 16:28:05 发布

阅读量240

点赞数

分类专栏： WEB前端文章标签： web前端 HTML

本文链接：https://blog.csdn.net/qq_38238296/article/details/85010132

版权

WEB前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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()  修改属性节点