原生Dom操作拾遗

March 4, 2017

js遍历属性

可以使用forin边路属性名

var beyond = {
 formedIn:"2922"  ,
 fround:"hangkong",
 artists:['a','b','c']
};
         
beyond.showArtist = function(){
for(var i = 0 ; i < this.artists.length ; i ++){
   document.writeln(this.artists[i]);
   //console.log(this);
}  
};
  
beyond.showArtist();
  
//遍历属性名
var property;
  
for (property in beyond){
 if(typeof[beyond[property]] !== 'function'){
     //console.log(beyond[property]);
 }
 console.log(property);
}

dom操作

        <h1 id="myh1">content h1 </h1>
        <p> content p a  </p>
        <p> content p b  </p>

        <ul class="myul-list">
            <li>li a</li>
            <li>li b</li>
            <li>li c</li>
            <li>li d</li>
        </ul>
        
        
        <button id="btn" onclick="console.log('clicked btn')" onmouseover="console.log('谁在上边')" onmouseout="console.log('谁离开了')" >button click</button>

getElement

 //1.getElementById
  var a = document.getElementById('myh1');            
  console.log(a);
  //2. getElementsByTagName
  var b = document.getElementsByTagName('p');
  console.log(b[0]);

选择器 querySelector

  //3.使用选择器
  //返回查到的所有元素
  var c = document.querySelectorAll('.myul-list li');
  console.log(c);
  //返回查到的第一个元素
  var d = document.querySelector('.myul-list li');
  console.log(d);

返回元素属性

  //4.返回元素的属性
  var e =  a.nodeName;
  console.log(e); // H1
  console.log(a.innerHTML);
  var f = document.querySelector('.myul-list');
  console.log(f.childNodes);
  console.log(f.childElementCount); //4
  console.log(f.firstElementChild.innerHTML);//li a

创建/插入元素

  //5.创建新的节点
  var newMember = document.createElement('li'); //创建li元素节点
  var newMemberText = document.createTextNode('张三');
  newMember.appendChild(newMemberText);
  document.querySelector('.myul-list').appendChild(newMember);
  document.querySelector('.myul-list').removeChild(newMember);    
  //插入位置
  var qList = document.querySelector('.myul-list');
  qList.insertBefore(newMember,qList.firstChild); //查到第一个元素位置

添加处理

  //6.事件处理                                    
  window.onload = function(){
      var btn = document.getElementById('btn');
      btn.onclick = function(){
          console.log('被点击了');
      };
      btn.onmousedown = function(){
          console.log('onmousedown');
      };
      //绑定多个事件,额外添加一个click
      btn.addEventListener('click',function(){
          console.log('被点击了2');
      });                
  };