对于dom编程，我们三步操作：
1.获得dom树：window.document
2.获得元素：直接获取、间接获取(
直接获取：getElementById，返回一个对象。getElementsByTagName，得到一组元素。getElementsByName，根据name属性值得到一组元素。还可以根据class获得...
简介获取：由父元素得到子元素，由子元素得到父元素，还有就是得到兄弟元素，我们下面写个div来举例子)
注意获取元素时候的属性调用以及方法调用都是要由Element字样的，对于get直接获取是方法，要有参数，而父子兄弟都是方法，没有参数、没有括号。文章最后，我会贴一下js的代码，至于html的代码很简单，就是input的属性为button，然后有一些name、id属性
3.操作元素：操作属性、操作样式、操作文本、增删元素

获得的结果通过f12的控制台查看
      
      
      

function getElement_ById() {
  var ele = document.getElementById("fButton")
  alert("F12打开控制台观看")
  console.log(ele)
}

function getElement_ByTag() {
  var ele = document.getElementsByTagName("input")
  alert("F12打开控制台观看")
  for(var i = 0; i < ele.length; i++) {
   console.log(ele[i])
  }
}

function getElement_ByName() {
  var ele = document.getElementsByName("button")
  for(var i = 0; i < ele.length; i++) {
   console.log(ele[i])
  }
}

function getElement_ByClass() {
  var ele = document.getElementsByClassName("test")
  for(var i = 0; i < ele.length; i++) {
   console.log(ele[i])
  }
}

function fatherGetChildren() {
  var ele = document.getElementById("tChild");
  var childrens = ele.children // 注意这是属性，没有括号。获取全部的子元素
  for(var i = 0; i < childrens.length; i++) {
   console.log(childrens[i])
  }
  console.log("-----------------")
  var children_1 = ele.firstElementChild; // 注意这是属性
  console.log(children_1)
  var children_2 = ele.lastElementChild; // 注意这是属性
  console.log(children_2)
}

function ChildrenGetFather() {
  var ele = document.getElementById("fButton");
  var father = ele.parentElement; // 注意这也是属性
  console.log(father)
}

function getBrother() {
  var ele = document.getElementById("sChild");
  var brotherFront = ele.previousElementSibling; // 注意这也是属性
  console.log(brotherFront)
  var brotherNext = ele.nextElementSibling; // 注意这也是属性
  console.log(brotherNext)
}