JS DOM 补

最新推荐文章于 2024-08-09 10:51:49 发布

前端小臂猿

最新推荐文章于 2024-08-09 10:51:49 发布

阅读量80

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64337756/article/details/122072895

版权

表格元素的获取

table.tHead; 获取表头获取到具体元素
table.tBodies; 获取tbody 获取到集合
table.tFoot; 获取tfoot 获取到具体元素
tBody.rows; 获取tr 获取到集合
row.cells; 获取td 获取到集合

表单元素获取

name值唯一获取到具体的元素，不唯一获取到集合，获取不到就是undefined，name值不存在

form.name值;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="form">
        用户名:<input type="text" name="user" /><br />
        密码:<input type="text" / name="pass"><br />
        爱好:<input type="checkbox" name="hobby" />篮球<input type="checkbox" name="hobby" />足球<input type="checkbox"
            name="hobby" />吃饭<input type="checkbox" name="hobby" />睡觉
    </form>
    <script>
        var form = document.querySelector("#form"),
            userName = form.user,
            userPass = form.pass,
            hobby = form.hobby;

        console.log(userName);
        console.log(userPass);
        console.log(hobby); //RadioNodeList(4) [input, input, input, input, value: '']
    </script>
</body>

</html>

表单元素事件

form表单事件
- onsubmit:表单提交事件 return true;提交 return false; 不提交
- onreset:表单重置事件 return true;重置 return false; 不重置
表单输入框事件
- onfocus:获取焦点事件
- onblur:失去焦点事件
- onchange:输入框内容改变触发的事件前提失去焦点内容改变(相对当前内容)
- onselect:内容选中触发的事件
- oninput:内容改变实时触发事件e
  - IE下独有的：onpropertychange 内容改变实时触发事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="form">
        用户名:<input type="text" name="user" /><br />
        密码:<input type="text" / name="pass"><br />
        测试:<input type="text" / name="test"><br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
    <script>
        var form = document.querySelector("#form"),
            userName = form.user,
            userPass = form.pass,
            usertest = form.test;
        /* 
            form表单事件
            onsubmit:表单提交事件  return true;提交  return false; 不提交
            onreset:表单重置事件   return true;重置  return false; 不重置
        */

        form.onsubmit = function () {
            //  return true;  //提交
            return false; //不提交
        }

        form.onreset = function () {
            //  return true;  //重置
            return false; //不重置
        }

        /* 
            表单输入框事件
            onfocus:获取焦点事件
            onblur:失去焦点事件
            onchange:输入框内容改变触发的事件  前提失去焦点内容改变(相对当前内容)
            onselect:内容选中触发的事件

            oninput:内容改变实时触发事件
            存在兼容问题：IE8及以下没有这个事件  不会报错

            IE下独有的：onpropertychange  内容改变实时触发事件
        */

        userName.onfocus = function () {
            console.log("哈哈");
            this.style.backgroundColor = "red";
        }

        userName.onblur = function () {
            console.log("呵呵");
            this.style.backgroundColor = "blue";
        }

        userPass.onchange = function () {
            console.log(this.value);
        }

        userPass.onselect = function () {
            console.log("选中了");
            this.style.color = "yellow";
        }

        /* 因为不报错 我们直接绑定两份*/
        usertest.oninput = function () {
            console.log(this.value);
        }
        usertest.onpropertychange = function () {
            console.log(this.value);
        }
    </script>
</body>

</html>