JavaScript 基础 DOM

1.DOM

    <h1 id=app>hello beng</h1>
    <script>
        var app = document.getElementById('app');
        //获取标签
        console.log(app);
        //修改内容
        app.innerHTML="风铃"
        //获取内容
        console.log(app.innerHTML);
        
    </script>

2.document

  • document的用法
        //修改标题
        document.title = "幻世风铃"
        console.log(document.title);
        console.log(document.body);
        console.log(document.head);
  • 获取元素
       <h1 id="app" title="hello" style="color: green;"  class="demo"  color="red">hello 风铃</h1>
        //获取h1元素
        var app = document.getElementById('app')

  • 获取属性
        // 获取属性
        console.log(app.id);
        //style  获取的是对象
        console.log(app.style);
        //class 要写成className   for  要写成 htmlFor 
        console.log(app.className);
        console.log(app.color);

  • 修改属性
        app.title = 'feng'
        app.className="feng"
        app.id="feng"

3.属性操作

    <h1 id="app" class="demo" color="red" style="color: green;">hello world</h1>
    <script>
        // 获取元素
        var app = document.getElementById('app')
        //通过点语法获取
        console.log(app.className);
        //getAttribute
        console.log(app.getAttribute('class'));


        //获取style 可以通过点 语法(获取的是一个 对象)
        console.log(app.style);
        //通过getAttribute  获取 style (获取的是一个字符串)
        console.log(app.getAttribute('style'));


        //获取自定义属性
        // 不能通过点 语法获取
        console.log(app.color);
        // getAttribute可以获取自定义属性
        console.log(app.getAttribute('color'));


        //获取其他属性没有区别
        console.log(app.id);
        console.log(app.getAttribute('id'));


        // 修改属性
        app.className = 'demo feng'
        app.setAttribute('class','feng')

        // 自定义属性
        app.setAttribute('color','orange')

        //新增
        //点语法只能新增自身有的
        app.title = "hello"
        // app.msg='hohuouho'  不生效
        // setAttribute()可以新增任何
        app.setAttribute('title','风铃')
        app.setAttribute('data-num',110)

        //修改样式
        //点语法(驼峰式命名) 在原有基础上新增的
        app.style.fontSize = '100px'
        setAttribute() (会覆盖原有的样式)
        app.setAttribute('style','font-size:100px')
    
    </script>

4.DOM事件操作

    <h1 id="app" class="demo" color="red" style="color: green;background-color: pink;">hello world</h1>
    <input id="inp" type="text" style="padding: 10px; margin-top: 50px;">
    <script>
	  //绑定事件监听用户与页面之间的交互
        var app = document.getElementById('app');
        var inp = document.getElementById('inp');
        //监听点击h1 元素
        app.onclick =function(){
            console.log('click h1');
        }
        //多次绑定 只执行最后一个(覆盖操作)
        // app.onclick =function(){
        //     console.log('click h1 222');
        // }

        //双击
        function fn(){
            console.log('click h1');
        }
        app.ondblclick =fn

        // 鼠标移入移出
        app.onmouseenter =function(){
            console.log('mouseenter');
        }
        app.onmouseleave =function(){
            console.log('onmouseleave');
        }


        //输入框
        inp.onfocus = function(){
            console.log('获取焦点');
        }
        inp.onblur = function(){
            console.log('失去焦点');
        }
	</script>

5.getElementsByTagName(获取标签)

        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
<script>
	        //获取页面的所有div
            var divs = document.getElementsByTagName("div");
            console.log(divs);
            //遍历divs
            for (var i = 0; i <= divs.length; i++) {
                console.log(divs[i]);
            }

            // 获取session 元素
            var app  =document.getElementById('app');
            // 通过App寻找 内部的  div 元素
            var divs = app.getElementsByTagName('div');
            console.log(divs);

            // 通过id获取元素
            // getElementById只能被document调用
            var div2 = app.getElementById('div2')
            console.log(div2);

            console.log(document.getElementsByTagName('section'));

</script>

6.getElementsByTagName(获取标签) 批量绑定事件

//批量的绑定事件
            var divs = document.getElementsByTagName("div");
            //绑定事件  bug (只输出 最后一个)
            // for (var index =0; index< divs.length; index++) {
            //     //绑定事件
            //     divs[index].onclick =function(){
            //         console.log(index);//7
            //     }
            // }

            // 方案一: IIFE 和闭包
            for (var index = 0; index < divs.length; index++) {
                //绑定事件
                divs[index ].onclick = (function (a) {
                    return function () {
                        console.log(a);
                    };
                })(index+1);
            }

            // 方案二:通过this获取
            for (var index = 0; index < divs.length; index++) {
                // 为元素添加一个属性,存储数据
                //获取元素是对象,因此可以添加属性
                divs[index].index = index + 1;
                //绑定事件
                divs[index].onclick = function () {
                    //this指向函数调用者,就是元素
                   console.log(this.index);
                };
            }

            // 方案三:
            for (var index =0; index< divs.length; index++) {
                //绑定事件
                divs[index].onclick =function(){
                    //元素的内容与索引值等价,可以将内容看成索引值
                    console.log(this.innerHTML);
                    // console.log(this);
                }
            }
已标记关键词 清除标记
相关推荐
<p style="font-size:16px;"> <span style="color:#7030A0;"><strong>本课程为 <span style="color:#FFFF00;background-color:#FF0000;">2020年</span> 新版</strong></span><span style="color:#7030A0;"><strong>录制,非常适合初学者的JavaScript视频课程,全面讲解<span style="color:#FFFF00;background-color:#FF0000;">JavaScript技术</span>,一站式学习,让你少走弯路,直达技术前沿!</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:20px;"><strong><span>以通俗易懂的方式全面讲解JavaScript技术,以知识讲解+实战案例的方式帮您快速入</span></strong><strong><span>门!</span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;font-size:18px;"><br /> </span> </p> <p style="font-size:16px;"> <strong><span style="font-size:18px;">课程内容包括:</span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;">1.JavaScript简介</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">2.<span style="color:#313D54;">JavaScript基本用法</span></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">3.变量和数据类型</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">4.运算符</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">5.数据类型转换</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">6.选择结构、循环结构</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">7.数组、函数</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">8.Debug调试</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">9.DOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">10.事件处理</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">11.BOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">12.自定义对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">13.原型prototype</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">14.内置对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">15.客户端存储Cookie、WebStorage</span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><span style="color:#FF0000;"></span></strong><strong><span style="color:#FF0000;">教学全程采用<span style="font-size:20px;color:#00B050;">笔记+代码案例</span>的形式讲解,每个知识点都有详细的讲解,通俗易懂!!!</span></strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090258436919.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259007133.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259114218.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259291679.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259474844.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259582372.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;font-size:24px;"><strong>全网500万学员的选择,好评如潮,专业更值得信赖......</strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><img src="https://img-bss.csdnimg.cn/202008090300125864.jpg" alt="" /><br /> </strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong>讲师介绍</strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong><img src="https://img-bss.csdnimg.cn/202008090303376757.jpg" alt="" /><br /> </strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><br /> </strong></span> </p>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页