Dom文档对象模型5.18

一、节点查询

①.getElementByld（）通过id获取元素

②.getElementByTagName（）通过标签名获取节点列表

③.getElementByClassName（）通过类名获取节点列

④.querySelector（）通过css选择器获取节点

⑤.querySelectorAll（）通过css选择器获取节点列表

代码：

var dom = document.getElementById("dom");
        console.log(dom,dom.innerText);

var ps = document.getElementByIdTagName("p");
        console.log(ps,ps[0].innerText);

var ps = document.getElementByIdTagName("p");
        for(var i=0;i
        console.log(ps,ps[i]);
        }
var sel = document.getElementByClassName("sel");
        console.log(sel,sel[1].innerText);
var fav = document.getElementsByName("fav")
        fav[1].checked = true;//让第二个选中 checked 选中的意思    
        console.log("fav");

二、节点的遍历

①.for()循环来遍历

②.转换为数组后forEach（）

代码：

var ps = document.getElementsByTagName("p");
         for(var i=0;i
            console.log(ps[i],ps[i.innerText]);
         }

var arr = Array.form(ps);
        arr.forEach(function(elem)){
            console.log(elem,elem.innerText)
        })

三、querySelector 通过css选择器的方法区查询节点

query查询 Selector选择器

代码：

var p = document.querySelector("div .four");
        console.log(p,p.innerText);

var p2 = document.querySelector("div p:last-of-type");
        console.log(p2,p2.innerText);

四、

①.changIt（）更改层内容

②.changeInp（）改变文本框内容

代码：

function changeIt(){
                 var div = document.querySelector("div");

                  div.innerHTML = "我还是喜欢魔兽争霸";
             }

function changeInp(){
                var input = document.querySelector("input");            
                input.value = "学前端，月薪过万";
            }

五、访问页面元素

①.showInput()---显示input内容

②.showSeason()---显示season内容

代码：

 function showSeason(){
                             var str = "";
                             var seasons = document.getElementsByName("season");
                             seasons.forEach(function(item){
                                                     str+=item.value+"
";
                             })
                             var tip  = document.getElementById("tip");
                             tip.innerHTML = str;
                             }
function showInput(){
                             var str = "";
                             var inps = document.querySelectorAll("input");
                             inps.forEach(function(item){
                                 str+=item.value+"
";
                             })
                             console.log(str); 
                             var tip = document.getElementById("tip");
                             tip.innerHTML = str;
                          }

六、修改style样式

例：

七、修改元素的显示与隐藏

例如：

 八、实现全选

九、通过classList修改类名，修改样式
toogle（）切换类名
add（）添加类名
remove（）删除类名
contains（）检测是否包含类名

function toggle(){
                var divs = document.getElementById("mydiv");
                divs.classList.toggle("hide");
            }