dom查询其他方法

获取body标签

   var body = document.getElementsByTagName("body")[0]
   console.log(body)

body也是document对象的一个属性 ,保存的是body的引用

    var body1 = document.body
	console.log(body1)

获取html根标签

    var html = document.documentElement;
	console.log(html)

获取页面中所有的元素

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

根据类名获取指定元素对象

   document.getElementsByClassName(c1)

根据选择器获取指定元素信息 querySelector

   var q = document.querySelector(".c1")
   console.log(q)
			
   var q1 = document.querySelectorAll(".c1")
   console.log(q1)
   console.log(q1[0])

查找#bj节点

   var btn01 = document.getElementById("btn01")
   btn01.onclick = function(){
	  //查找#bj节点
	  var bj = document.getElementById("bj")
	  // 通过innerHTML这个属性可以获取元素内部内容
	  alert(bj.innerHTML)
   }
				

			**查找所有li节点**

var btn02 = document.getElementById("btn02")
btn02.onclick = function(){
	//查找所有li节点
	var list = document.getElementsByTagName("li")
	console.log(list)
	for(var i = 0; i < list.length;i++){
		alert(list[i].innerHTML)
	}
}

			**查找name=gender的所有节点**

var btn03 = document.getElementById("btn03")
btn03.onclick = function(){
    //查找所有li节点
	var genders = document.getElementsByName("gender")
	// console.log(genders)
	for(var i = 0; i < genders.length;i++){
		alert("hello")
	}
}

查找#city下所有li节点

var btn04 = document.getElementById("btn04")
	btn04.onclick = function(){
		//查找#city下所有li节点
		var city = document.getElementById("city")
		console.log(city)
		var list = city.getElementsByTagName("li")
		for(var i = 0; i < list.length;i++){
			alert(list[i].innerHTML)
		}
}

返回#city的所有子节点

var btn05 = document.getElementById("btn05")
    btn05.onclick = function(){
		//返回#city的所有子节点
		var city = document.getElementById("city")
		console.log(city)
		// 返回 #city元素下所有的子节点
		var list = city.childNodes
		console.log(list)
		// 返回#city元素下所有的子元素
		var list1 = city.children
		console.log(list1)
}
				

返回#phone的第一个子节点

  var btn06 = document.getElementById("btn06")
	  btn06.onclick = function(){
		var phone = document.getElementById("phone")
		console.log(phone)
		// 返回 #phone元素下所有的子节点
		var list = phone.childNodes
		console.log(list)
		// 返回#city元素下所有的子元素
		// var list1 = phone.children
		// console.log(list1)
}

var ul = document.getElementsByTagName("ul")[0]
			// 获取ul下所有的子元素
			var children1 = ul.children
			console.log(children1)
			// 获取ul下所有的子节点
			var children2 = ul.childNodes
			console.log(children2)
			
			// 获取ul的父节点
			var parent1 = ul.parentNode
			console.log(parent1)
			
			// 获取ul的父元素
			var parent2 = ul.parentElement
			console.log(parent2)
			
			// 获取ul的第一个子节点
			var first1 = ul.firstChild
			console.log(first1)
			
			// 获取ul的第一个子元素
			var first2 = ul.firstElementChild
			console.log(first2)
			
			// 获取ul的上一个兄弟节点
			var brother1 =  ul.previousSibling
			console.log(brother1)
			
			// 获取ul的下一个兄弟节点
			var brother2 =  ul.nextSibling
			console.log(brother2)
			
			// 获取ul的上一个兄弟元素
			var brother3 =  ul.previousElementSibling
			console.log(brother3)
			
			// 获取ul的下一个兄弟元素
			var brother4 =  ul.nextElementSibling
			console.log(brother4)