js第六章

如何通过DOM获取元素节点

通过DOM节点获取HTML元素的4种方法  每种方法都要掌握.非常相似.
           
方法1:通过标签名获取元素

            var a = document.getElementsByTagName("h3");
此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
至于怎么去处理,就是后续的任务.
           
方法2:通过class名获取元素

            var b = document.getElementsByClassName("a");
此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
           
方法3:通过name获取元素

            var c = document.getElementsByName("b");
此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
           
方法4:通过id获取元素

因为id是唯一标识符 所以返回的是一个元素,可以直接处理
            var d = document.getElementById("c");
如何操作节点

    常见的操作节点的三个属性：

                    1.innerText

表示给标签内部重新赋值或取值  这里是文本值
                   
                    2.innerHtml

表示给标签内部重新赋值或取值  这里是html值
                   
                   
                    注意以上2个方法只能作用于 非表单元素  例如 h标签  a标签   p标签等等
                   
                    //第三个方法只能作用于表单元素
                    例如input  
                   
                    方法3：  value

表示给标签内部重新赋值或取值  这里是html值
                   
                   
            */
           
           
            // var a = document.getElementsByTagName("h3");
            // for(var i = 0 ;i<a.length;i++){
            //  console.log(a[i].innerText);//表示获取各个h3标签内部的文本值
            //  a[i].innerHTML = "<a href='#'>你好</a>";
            // }
           
           
           
            // var b = document.getElementsByClassName("a");
            // for(var i = 0 ;i<b.length;i++){
            //  console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值
            // } 
            var d = document.getElementById("abc");
            // d.value = "账号123";
            console.log(d.value);
           如何操作节点的样式

//如何改变一个节点的样式:  
            //步骤1.思考需要修改什么样式
            //步骤2.去css里面查看该样式的单词
            //步骤3.按照提示来
            //步骤4.通过    节点.style.xxx  表示取值或赋值
           
           
            //例如我要修改字体颜色
            // p.style.color = "red";
            // console.log(p.style.color)
           
            //例如我要修改背景色
            // p.style.backgroundColor = "green"
           
           
           
            //以上写法的缺点: 麻烦  每次只能修改一个样式
           
            //所以:  如果样式很多,我们可以先将其封装到一个css里面
            p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性