JavaScript DOM简介

最新推荐文章于 2022-09-25 11:19:44 发布

不忘初心-倩

最新推荐文章于 2022-09-25 11:19:44 发布

阅读量202

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41988977/article/details/80514013

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. DOM获取页面的元素

1.1 getElement系列访问

通过DOM获取页面的元素的三种方式

(1) getElementById( )方法访问DOM元素 —》 id获取一个元素

(2) getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)

(3) getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)

(4) getElementsByClassName()方法访问DOM元素 –》类样式名称获取(数组)

1.2 操作节点的属性

(1) getAttribute("属性名")

(2) setAttribute("属性名","属性值")

<script>
    function showUrl(){
     //1找到该图片
         var img=document.getElementById("img");
          var url=img.getAttribute("src");
        alert(url);
    }
    function changeUrl(){
        //1找到该图片
        var img=document.getElementById("img");
        //更改src属性的值
        img.setAttribute("src","images/1.png");
    }
</script>
<body>
<button οnclick="showUrl();">查看图片的路径</button>
<button οnclick="changeUrl();">更换图片</button>
<img id="img" src="images/book.jpg" alt="我是一本书"  >
</body>

1.3 操作节点样式

(1) style属性

(2) className属性

(3) HTML元素.style.样式属性＝"值"

document.getElementById("cart").style.backgroundColor="#f9f9f9";

document.getElementById("cartList").style.display="none";

(4) HTML元素.className="样式名称"

document.getElementById("cart").className="cartOver";

2. javascript的事件

(1) onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。

(2) onclick/ondblclick:鼠标单击和双击事件

(3) onkeydown/onkeypress：搜索引擎使用较多

(4) onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。

(5) onmouseover/onmouseout/onmousemove：购物网站商品详情页。

(6) onsubmit：表单提交事件，有返回值，控制表单是否提交。

(7) onchange:当用户改变内容的时候使用这个事件(二级联动)

页面表单提交的三种方式


<button>点我有惊喜</button>

案例演示onfocus/onblur/onsubmit

当用户名和密码为空时,表单不能提交

1. 给form表单添加 onsubmit事件

函数返回true,表单提交,fasle不提交

<style type="text/css">
        span {
            color: red;
        }
    </style>
    <script>
        function checkUser(uname) {
            //获取文本框的值 如果为空添加提示
            var username = uname.value;
            if (username.length == 0) {
                //获取span元素添加提示
                document.getElementById("uname").innerHTML = "用户名不能为空";
            }
        }
        function changeContext(address) {
            address.value = "";
        }
        function check() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if (username.length == 0) {
                return false;
            }
            if (password.length == 0) {
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<form action="index.html" οnsubmit="return check(); ">
    <table>
        <tr>
            <td>用户名</td>
            <td><input id="username" οnblur="checkUser(this);" type="text"><span id="uname"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input id="password" type="password"><span id="pwd"></span></td>
        </tr>
        <tr>
            <td>地址</td>
            <td><input οnfοcus="changeContext(this);" value="输入地址"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>

演示: onmouseover/onmouseout

鼠标移到图片上面添加边框，移开干掉边框

方式一:

<script>
    function move(){
      var img=document.getElementById("mm");
        img.style.border="1px solid red";
    }
    function out(){
        var img=document.getElementById("mm");
        img.style.border="";
    }


</script>
<body>
<img id="mm" οnmοusemοve="move();" οnmοuseοut="out();" src="images/1.png" >
</body>

方式2：
<body>
<img id="mm"  src="images/1.png" >
</body>
</html>
<script>

    //1.获取img
    var img=document.getElementById("mm");
    img.οnmοusemοve=function(){
        img.style.border="1px solid red";
    }
    img.οnmοuseοut=function(){
        var img=document.getElementById("mm");
        img.style.border="";
    }
</script>

不忘初心-倩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM简介

1. DOM获取页面的元素1.1 getElement系列访问通过DOM获取页面的元素的三种方式(1) getElementById( )方法访问DOM元素 —》 id获取一个元素(2) getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)(3) getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)(4) get...
复制链接

扫一扫

专栏目录