js基础学习（dom）

调用数据的4种方法： 

       document.getElementById();

       document.getElementsByClassName();

       document.getElementsByName();

       document.getElementsByTagName();

 调用数组或者数组的方法：

    document.querySelector();对象

    document.querySelectorAll();数组

 

parentElement和parentNode的区别：

用法：parentNode：获取父节点；parentElement：获取父元素

 共同点：parentNode和parentElement都可以获取父节点的所有节点属性，可以配合nodeName获取节点名字

唯一区别：在获取根部document节点是，parentElement找的是元素，因此报错null,而parentNode获取的是节点，返回的是#document

childNodes和children区别：

childNodes：获取子节点——返回所有节点的数组,只返回文本和元素节点，对于属性节点直接无视

 

 

children：子元素——只返回元素节点

 

 样式：

var li =document.querySelector("#li1");       （调用）

     li.style.color="red";                                     直接使用

     li.style.backgroundColor="#ccc";                驼峰命名法（首字母大写，代替“-”）

     li.style["background-color"]="#ccc";            使用数组命名法   []里面是写的属性样式

 

 属性  attributes：

        console.log(li.id);

        console.log(li.className);

        console.log(li.attributes["data-id"]);       //vlue和name(值和名字)

        console.log(li.attributes["data-id"].vlue);  

 

 

 

onclick点击事件：

 var btn= document.querySelector("button");

    btn.onclick=function(){

        alert(this.value);                            //交互控件的值

    }

 

 

    var li=document.querySelector("#li1");

    li.onclick=function(){

        console.log(this.innerHTML);          //里面的标签

        console.log(this.innerText);             //里面的文本

    }

 

 

<select name="" id="" size="2">

size=0时，有几个选项，显示几个选项

size=2时，显示2个选则

 

 var select=document.querySelector("select");

    select.onchange=function(){

        console.log(this.value);

    }

onchange事件：当数值发生改变时触发事件