js DOM

如何通过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的属性