document拿到的是整个html页面，之后element对标签进行选择拿取,少用id多用class
<body>
<div class="div1">
<p class="p1">hello 1 p</p>
<p class="p1">hello 2 p</p>
<div class="div2"></div>
</div>
<script>
//document拿到的是整个html页面，之后element对标签进行选择拿取
//
var ele=document.getElementsByClassName("p1")[1];//当class相同但多个内容不同的标签存在时，可以用数组进行取值，可以查看到结果是hello 2 p
console.log(ele)
</script>
<body>
<div class="div1">
<p class="p1">hello 1 p</p>
<p class="p1">hello 2 p</p>
<div class="div2">hello div
<div>div3</div>
<a href="">click</a>
</div>
</div>
<script>
var ele1=document.getElementsByClassName("p1")[0];
console.log(ele1.parentElement)
// 兄弟：sibling
var ele=document.getElementsByClassName("div1")[0];
console.log(ele.children)//children是属性，js主要用属性，jquery主要是用方法
</script>
<body>
<div class="div1">
<p name="littleP" class="p1">hello 1 p</p>
<div class="div2">hello div
<div>div3</div>
<a href="">click</a>
</div>
</div>
<script>
var ele=document.getElementsByName("littleP")[0];//通过name拿标签,不加数组不行
var ele1=ele.nextElementSibling;//拿到p标签下的div2了
console.log(ele1.innerText)//获取div2以下所有文本内容，innertext
</script>