js第14课——元素与节点

dom 数

• 节点（换行、空格、制表符）元素—>元素节点

• 元素：element；节点 node ；nodejs

• 一、 节点或者元素之间的各种关系

  • 子关系;

  var containerEle = document.querySelector(".container");
  

  • 1.获取子元素 父元素.children

  var childrens = containerEle.children;
  console.log(childrens);
  

  • 2.获取子节点

  var nodes = containerEle.childNodes;
  console.log(nodes); //会获取换行属性
  

  • 3.获取第一个子元素 firstElementChild

  console.log(containerEle.firstElementChild);
  

  • 4.获取第一个子节点

  console.log(containerEle.firstChild);
  

  • 5.获取最后一个子元素

  console.log(containerEle.lastElementChild);
  

  • 6.获取最后一个子节点

  console.log(containerEle.lastChild);
  

• 一.父关系:注意:父元素和父节点是一样的,都是元素;

var sonEle = document.querySelector(".son");

• 1.父元素 parentElement

console.log(sonEle.parentElement);
console.log(sonEle.parentElement.parentElement);

• 2.父节点

console.log(sonEle.parentNode);

• 二.兄弟关系

var sonEle = document.querySelector(".son");

• 1.下一个元素 nextElementSibling

console.log(sonEle.nexrElementSibling);

• 2.下一个节点

console.log(sonEle.nextSibling);

• 3.上一个兄弟元素

console.log(sonEle.previousElementSibling.previousElementSibling);