dom :document、element,如何取父标签和子标签,innertext获取标签内容

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>
 
原文地址:https://www.cnblogs.com/wfl9310/p/9195722.html