JavaScript修炼之路-筑基篇(六)Web APIs、Dom及元素获取

目录

(1)document. getElementById('id');

(4)document.getElementsByClassName('类名');  //根据类名返回元素对象合集

(5)document.querySelector('选择器');        //根据选择器返回 第一个元素  的对象


  • js中DOM页面文档对象模型(Document Object Model)BOM游览器对象模型即为Web APIs。

API即为基于软硬件得以访问一组例程的能力,一个工具,能更轻松的实现想要的功能,Web API是游览器提供的一套操作 游览器功能页面元素 的API。

一般都有输入和输出(函数的传参和返回值),很多都是方法

  • DOM简介:处理可扩展标记语言的标准编程接口,w3c已经定义一系列dom接口,通过这些dom可以改变网页的内容、结构和样式。

    文档document、元素element、节点node(都是对象)根据ID获取:       

(1)document. getElementById('id');

        返回id匹配的元素

<body>

    <div id="time">2021-2-2-2-2-div>

body>

<script >

    var times = document.getElementById('time');

    console.log(times);

    console.log(typeof times);//返回的是一个元素对象

    console.dir(times);//返回对象的属性和方法

script>

(2)getElementsByTagName();可以返回带有指定(整个页面)标签名的对象的集合,以为数组的形式存储

<body>

    <ul>

        <li>12  li>

        <li>sdcli>

        <li>cscli>

        <li>zxcli>

        <li>csdli>

    ul>

body>

<script >

    var lis = document.getElementsByTagName('li');   //获取带指定标签名的对象合集

    console.log(lis);

    console.log(lis[1]);

    //要想打印全部则用遍历

    for (var i = 0; i < lis.length ; i++)

    {

        console.log(lis[i]);

    }

(3)element.getElementsByTagName('  ');  

获取某个 父元素内部 所有指定标签名的子元素。

注意:父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

    里面有
  1. 则不能ol.getElementsByTagName('li');

    可改成       ol[0].getElementsByTagName('li')(一般都不那么写)

    可给标签一个id如:var ol = document.getElementsById('name');

    (4)document.getElementsByClassName('类名');  //根据类名返回元素对象合集

    (5)document.querySelector('选择器');        //根据选择器返回 第一个元素  的对象

    <body>

        <div class="box">盒子1div>

        <div class="box">盒子2div>

        <div id="nav">

            <ul>

                <li>首页li>

                <li>产品li>

            ul>

        div>

    body>

    <script >

       var firstbox = document.querySelector('.box');//切记里面的选择器要加符号.#

       console.log(firstbox);

        var nav = document.querySelector('#nav');

        console.log(nav);

        var li = document.querySelector('li');//返回第一个元素对象

        console.log(li);

        var all = document.querySelectorAll('li');//返回指定选择器的所有对象

        console.log(all);

    获取特殊元素body、html

    <body>

        <div class="box">盒子1div>

        <div class="box">盒子2div>

        <div id="nav">

            <ul>

                <li>首页li>

                <li>产品li>

            ul>

        div>

    body>

    <script >

        //获取body元素

       var bodyEle = document.body;

       console.log(bodyEle);

       console.dir(bodyEle);

       //获取html元素

       var htmlEle = document.documentElement;

       console.log(htmlEle);

    script>


    祝你学习快乐!

你可能感兴趣的:(javascript,前端,开发语言)