DOM通过方法获取和通过关系获取的方式

目录

一、通过方法获取

1.H5之前的方式：

2.H5的方式 

3.注意

二、通过关系获取

1.父

2.子 

3.弟弟妹妹 

4.哥哥姐姐 

5.第一个子 

6.最后一个子 

7.同胞中的第几个 

---

一、通过方法获取

1.H5之前的方式：

• document.getElementById                    通过ID获取
• document.getElementsByClassName   通过类名class获取
• document.getElementsByName            通过属性名name获取
• document.getElementsByTagName      通过标签名获取

2.H5的方式 

• document.querySelector        如果有很多个都符合，就选择符合的第一个/Null
• document.querySelectorAll    选择符合的所有/Null

var box1=document.querySelector("box")   //标签名
var box4=document.querySelector("#box1") //id名
var box4=document.querySelector(".box1") //类名
var box4=document.querySelector("input[name='box1']") //name

3.注意

注意：不建议直接使用标签的id名作为节点对象引用。最好声明之后使用。

//正确使用：
<div id="box1">hello</div>
<script>
var div1=document.getElementById("box1")
</script>

二、通过关系获取

1.父

父元素：var fh=document.querySelector("box1").parentElement

父节点：var fh=document.querySelector("box1").parentNode

2.子 

子元素们：var son1=document.querySelector("box2").children

子节点们：var son1=document.querySelector("box2").childNodes

3.弟弟妹妹 

下一个元素： var re1 = document.querySelector("box3").nextElementSibling

下一个节点： var re1 = document.querySelector("box3").nextSibling

4.哥哥姐姐 

上一个元素：re2=document.querySelector("box4").previousElementSibling

上一个节点：re2=document.querySelector("box4").previousSibling

5.第一个子 

var box = document.querySelector("#box2")

console.log(box.firstElementChild)//第1个子元素

console.log(box.firstChild)             //第1个子节点

6.最后一个子 

var box = document.querySelector("#box2")

console.log(box.lastElementChild)//最后一个子元素

console.log(box.lastChild)             //最后一个子节点

7.同胞中的第几个 

 调用者是父元素中的第几个元素 .index()