温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js的DOM编程基础

发布时间:2020-07-26 05:20:27 来源:网络 阅读:381 作者:汇天下豪杰 栏目:开发技术

1、DOM编程

  是文件对象模型,是可扩展的编程语言的接口,是专门为修改标签服务的

  思路:先找要修改的标签,对其进行增加/修改,可以修改某一个属性/样式,从而让标签动起来;

  DOM是和js结合来使页面动起来的;


2、DOM选择器

(1)、找标签的:(document是一个对象)

  document.getElementById('id');    //id是唯一的

  document.getElementsByName('name');   //名字可以相同

  document.getElementsByTagName('tagname');  //通过标签查找(a、p、div、)

(2)、创建标签

  document.createElement('a');

(3)、获取/修改样式

  obj.className

(4)、获取/设置属性

  setattribute(key, val);   getattribute(key); 

(5)、获取/修改样式中的属性

  obj.style.属性

注意:js中的属性名称可能和CSS中的名称不一致:

以上方法的示例如下:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>js1</title>
        <style>
            .show{
                
            }
            .hide{
                display:none
            }
        </style>
    </head>
    
    <body>
        <div id = 't1'>abc</div>
        <div id = 't2'>d<span>e</span>f</div>
        <hr/>
        
        
        <!--
        <script type='text/javascript'>    
            var id1 = document.getElementById('t1'); //文档对象
            console.log(id1.innerText);  //获得标签内容
            id1.innerText = '123';  //对标签内容进行修改
            console.log(id1.innerText);
            var id2 = document.getElementById('t2'); //文档对象
            console.log(id2.innerHTML); //innerText和innerHTML等价
        </script>-->
<!--
            <div id = '123'>abcdefghijkl</div>
            <hr/>
            <div name = 't1'>jkl</div>
            <hr/>
            <div name = 't1'>uio</div>
            <hr/>
            <script type = 'text/javascript'>
                var s = document.getElementById('123');
                s.innerText = 'hao';
                var names = document.getElementsByName('t1');
                //names[0].innerText = 'de';
                //names[1].innerText = 'hen';
                for(var items in names){
                    names[items].innerText = 'zaima?';
                }
                var all = document.getElementsByTagName('div');
                for(var items in all){
                all[items].innerText = 'xing';
            }
-->
<!--
        <div id = 't1' class = 'show' name = 'alex'>内容</div>    
        <div id = 't2' style = 'width:500px;height:200px;border:2px solid #333;'></div>
-->        
        <!--
        <form id = ‘F1’ action = 'https://www.sogou.com/web?' method = 'GET'>
            <input type = 'text' name = 'query'/>   
            <input type = 'submit' value = '提交' />
            <input type = 'button' value = '伪提交' onclick = 'Foo();' />
                //点击执行Foo()函数,是一个事件
        </form>
        
        <script type = 'text/javascript'>
        /*创建标签方法1、
            var tag = document.createElement('a');
            tag.href = 'http://www.baidu.com.cn'
            tag.innerText = '点我啊';
            var id1 = document.getElementById('t1');  //寻找父容器
            id1.appendChild(tag);
        */
        /*
        创建标签方法2、
        var tag = "<a href = 'http://www.baidu.com.cn'>走你</a>";
        var id1 = document.getElementById('t1');
        id1.innerHTML = tag;
        */            
        /*
        var id1 = document.getElementById('t1');
        id1.className = 'hide';   //修改className
        */
        /*
        var id1 = document.getElementById('t1');
        console.log(id1.getAttribute('name')); //获取属性
        id1.setAttribute('name', 'oldboy');
        console.log(id1.getAttribute('name'));
        
        var id1 = document.getElementById('t2');
        console.log(id1.style.width);
        */
        提交表单
        function Foo(){
            var id1 = document.getElementById('F1');
            id1.submit();
        }
        </script>  -->
    </body>
</html>

3、常用事件

当设置事件时,相应的执行操作会执行其所对应的函数。

  onclick:点击事件

  onfocus:元素获得焦点

  onblur:元素失去焦点

一个应用(搜索框):

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>页面一</title>
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
    </head>
    
    <body>
        <input type = 'text' class = 'gray' id = 'tip' value = '请输入关键字' 
        onfocus = 'Enter();' onblur = 'Leave();'/>
        
        <script type = 'text/javascript'>
            function Enter(){
                var id = document.getElementById('tip');
                id.className = 'black';
                
                if(id.value == '请输入关键字' || id.value.trim() == ''){
                    id.value = '';
                }
            }
            function Leave(){
                var id = document.getElementById('tip');
                var val = id.value;
                
                if(val.length == 0 || id.value.trim() == ''){
                    id.className = 'gray';
                    id.value = '请输入关键字';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </body>
</html>

运行结果

js的DOM编程基础

js的DOM编程基础

撤走之后,没有内容又会恢复原样!!!



向AI问一下细节
推荐阅读:
  1. JS之DOM那些事
  2. DOM 基础

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI