JavaScript-Dom

DOM对象

• document.getElementById(); //根据id选择器

• document.getElementsByClassName()[0]; //根据类选择器

• document.getElementsByTagName()[0]; //根据标签去拿

• document.getElementsByName(); //根据name属性

• document.querySelector(“#btn”); //只会取到第一个

• document.querySelectorAll(“.btn”); //匹配所有

1. 鼠标进入
   • onmouseover
2. 鼠标移出
   • onmouseout
3. 鼠标移动
   • onmousemove
4. 鼠标点下
   • onmouseup
   • onmousedown

<div id="box"></div>

<script>

  var box = document.getElementById("box");
  //鼠标进入
  box.onmouseover = function() {
    console.log("鼠标进入");
  };
  //鼠标移出
  box.onmouseout = function() {
    console.log("鼠标移出");
  }
  // 鼠标移动
  box.onmousemove = function() {
    console.log("鼠标移动");
  }
  // 鼠标点下
  box.onmousedown = function() {
    alert("你按下了鼠标");
  }
  box.onmouseup = function() {
    alert("你松开了鼠标");
  }
</script>

节点访问关系

• 获取子节点

  • childNodes
  • children

• 获取第一个子节点

  • firstChild
  • firstElementChild

• 获取最后一个子节点

  • lastChild
  • lastEhlementChild

• 获取父节点

  • parentNode
  • parentElement
  • offsetParent //Body下所有节点

• 获取上一个兄弟节点

  • previousSibling
  • previousElementSibling

• 获取下一个兄弟节点

  • nextSibling
  • nextElementSibling

综合 获取任意子节点

var sonNode = btn.parentElement.children;

for(var i=0; i<sonNode.length; i++) {
  console.log(s[i]);
}

节点操作

• 创建节点[createElement(“标签名”);]

var img = document.createElement("img"); // 拿到节点
img.src = "imgs/bg1.jpg";  //设置属性

• 插入节点[appendChild(节点)]

两种方法:

1. 父节点.appendChild(节点);

2. 父节点.insertBefor(新节点,参考节点);

var img = document.createElement("img"); // 拿到节点
img.src = "imgs/bg1.jpg";  //设置属性

var box = document.getElementById("box");
box.appendChild(img);        //插入节点

• 删除节点[remove()]

两种方法:

1. 父节点.remouveChild(子节点);

2. 当前节点.remove();

var box = document.getElementById("box"); //找到节点

box.remove();   //找到自己把自己删除了

• 复制节点[cloneNode(true);]

var box = document.getElementById("box"); //查找

var newTag = box.cloneNode(true); //复制

box.appendChild(newTag); //添加

节点属性

• 查看属性[getAttribute(属性)]

var box = document.getElementById("box"); //Find

/*获取属性*/
console.log(box.getAttribute("id"));
console.log(box.getAttribute("name"));

• 修改属性[setAttribute(属性,值)]

var box = document.getElementById("box"); //Find

box.setAttribute("My","gulu"); //Insert
console.log(box);

• 删除属性[removeAttribute(属性)]

var box = document.getElementById("box"); //Find
box.removeAttribute("id");  //Delete

Demo 获取网站上所有的图片链接

var img = document.querySelectorAll("img"); //找到所有图片
for(var i=0; i<img.length; i++) {
    //console.log(img[i].getAttribute("src"));
    //console.log(img[i].removeAttribute("src"));
  console.log(img[i].src) //具体
}

Demo 删除网站上所有的图片

var img = document.querySelectorAll("img"); //找到所有图片
for(var i=0; i<img.length; i++) {
    console.log(img[i].removeAttribute("src"));
}