js 12

1.元素间关系查找


1)父子关系


parentElement; 查找一个元素的父元素

children;查找一个元素的所有孩子

firstElementChild;查找第一个孩子

lastElementChild;查找最后一个孩子

2)兄弟关系


previousElementSibling  前一个兄弟元素

nextElementSibling      下一个兄弟元素

案例:


<ul id='king'>

    <li>

        电子设备

        <ul>

            <li>手机</li>

            <li>电视</li>

            <li>电脑</li>

        </ul>

    </li>

    <li>

        母婴用品

        <ul>

            <li>奶粉</li>

            <li>玩具</li>

            <li>尿不湿</li>

        </ul>

    </li>

    <li>

        个人护理

        <ul>

            <li>面膜</li>

            <li>爽肤水</li>

            <li>BB霜</li>

        </ul>

    </li>

</ul>

<script>

    //查找tree的父元素

    console.log(king.parentElement);

    //查找tree的子元素

    console.log(king.children);

    //从tree找到奶粉尿不湿

    console.log(king.children[1].firstElementChild.children[0]);

</script>

2.使用HTML元素查找


<ul id='king'>

    <li class='list'>电子设备</li>

    <li class='list'>母婴用品</li>

    <li class='list'>个人护理</li>

</ul>

<input type="" name="uname">

1)按id查找


var ul=document

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 数组:内存中的一段存储空间,多个变量的集合. 创建一个组数(声明)var str='' var arr=【】;声明...
    生世在一起阅读 199评论 0 0
  • 学习如何使用nodejs向其他web服务器发送请求是十分重要的 http已经演变成为并非仅用于交换最终渲染,展示给...
    在路上的海贼阅读 393评论 0 0
  • 1.元素间关系查找 1)父子关系 parentElement; 查找一个元素的父元素 children;查找一个元...
    Polaris_L阅读 152评论 0 0
  • ‘’‘js Dom: 操作页面元素(增删改查) 1.查找: 一.通过元素间的关系查找 1)父子关系 ...
    小豪豪豪豪豪豪阅读 267评论 0 0
  • Dom: Document Object Model文档对象模型 专门操作网页内容的API 1.Dom可进行的操...
    萧声断未央阅读 342评论 0 0