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);
                }
            }