JavaScript、js组成 web API、DOM、获取元素的五种方法

最新推荐文章于 2024-05-17 13:52:13 发布

MDR_0820

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量256

点赞数

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/mdr_0820/article/details/120861432

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

js组成 web API、DOM、获取元素、ID 获取元素、标签名获取、HTML5新增获取、quertSelector、document.querySelectorAll、获取特殊元素（body、HTML）

JS 的组成

在这里插入图片描述

API

API 应用程序编程接口是一些预先定义的函数目的是提供应用程序与开发人员基于某软件或硬件得以访问一组编程的能力而又无需访问源码或理解内部工作机制的细节
简单理解： API 是给程序员提供一种工具以便更轻松的实现想要完成的功能

Web API

Web API 是浏览器提供的一套操作浏览功能和页面元素的API（BOM和DOM）
API 参考接口网站：https://developer.mozilla.org/zh-CN/docs/Web/API
因为Web API 很多所以我们将这个阶段称为 Web APIs

API 和Web API

API 是为我们程序员提供的一个接口帮助我们实现某种功能
WebAPI 主要是针对于浏览器提供的接口主要针对于浏览交互效果
WebAPI 一般都有输入和输出（函数的传参和返回值）

DOM

DOM 文档对象模型是w3c组织推荐的处理可扩展标记语言（HTML或 XML）的标准编程接口
W3C 已经定义了一些列DOM接口通过这些DOM接口可以改变网页的内容、结构和样式

在这里插入图片描述

文档：一个页面就是一个文档 DOM中使用document 表示
元素：页面中的所有标签都是元素 DOM中使用 element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）DOM中使用node表示
DOM 把以上内容都看做是对象

获取元素

DOM 在开发中主要用来操作元素
获取页面元素的方法：
根据ID获取元素
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

ID 获取元素

使用 getElementBydi() 方法获取带有ID 的元素对像 驼峰命名法
Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

参数

element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

返回值

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

<body>
    <div id= text>熟悉的DIV</div>
    <script>
        // 因为我们文档页面是从上往下加载的 所以先要有标签
        // 因此 我们的script要写到标签下面
        //get获得 element 元素 by 通过 驼峰命名法
        // 参数ID 是大小写的敏感字符串 返回的是一个元素 对象
        var ttext = document.getElementById('text')
        console.log(ttext);
        console.log(typeof ttext);
        // console.dir 打印返回的元素对象 更好的查看里面的属性和方法
        console.dir(ttext);
    </script>
</body>

在这里插入图片描述

根据标签名获取

Document.getElementsByTagName()

get 得到、element 元素、 By 通过、tag 标签、

使用getElementByTagName(‘标签名’)可以返回带有指定标签名的对象集合
因为得到的是一个对象所以想要操作里面的元素就需要遍历
得到的元素是动态的当修改标签里边的元素返回值也会发生改变

div>
        <ul>
            <li>天行健</li>
            <li>君子以自强不息</li>
            <li>地势坤</li>
            <li>君子以厚德载物</li>
            <li>天行健，君子以自强不息</li>
            <li>地势坤，君子以厚德载物</li>
            <script>
                var lis = document.getElementsByTagName('li') //根据标签名获取
                console.log(lis);
                 for(var i =0;i < lis.length; i++ ){ //遍历元素
                    console.log(lis[i]);
            </script>
        </ul>
    </div>

在这里插入图片描述
如果这个页面没有这个元素则返回的是一个空的伪数组形式

<script>
                var lis = document.getElementsByTagName('li') //根据标签名获取
                console.log(lis);
                console.log(lis[0]);
                for(var i =0;i < lis.length; i++ ){ //遍历元素
                    console.log(lis[i]);

在这里插入图片描述

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

element.getElementByTagName（‘标签名’）
父元素必须是单个对象（必须指明是那一个元素对象）获取的时候不包括父元素自己

<div>
        <ul>
            <li>天行健</li>
            <li>君子以自强不息</li>
            <li>地势坤</li>
            <li>君子以厚德载物</li>
            <li>天行健，君子以自强不息</li>
            <li>地势坤，君子以厚德载物</li>
         <ol id= ol>
             <li>getElementsByTagName</li>
             <li>getElementByid</li>
             <li>自强不息</li>
         </ol>   
            <script>
                var lis = document.getElementsByTagName('li') //根据标签名获取
                console.log(lis);
                console.log(lis[0]);
                for(var i =0;i < lis.length; i++ ){ //遍历元素
                    console.log(lis[i]);
                } 
                var ol = document.getElementById('ol') 
                console.log(ol.getElementsByTagName('li'));
            </script>
        </ul>
    </div>

在这里插入图片描述

通过HTML5新增获取

Document.getElementsByClassName(‘类名’) 、、根据类名返回元素对象集合
返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素
getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素.

body>
    <div class="box">禁止</div>
    <div class="box">套娃</div>
    <script>
        var boxx = document.getElementsByClassName('box')
        console.log(boxx);
    </script>
</body>

在这里插入图片描述

quertSelector 返回指定选择器的第一个元素对象

文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。如果找不到匹配项，则返回null 切记要加符号

<body>
    <div class="box">禁止</div>
    <div class="box">套娃</div>
    <div id="nav">禁止套娃</div>
    <ul>
        <li>小丽</li>
        <li>小莉</li>
    </ul>
    <script>
        var boxx = document.getElementsByClassName('box')
        console.log(boxx);
        // querySelector 返回指定的选择器的第一个元素对象
        var boxs = document.querySelector('.box') //  返回第一个元素对象  因为是类选择器 所以要加 点 .
        console.log(boxs);
        var nava = document.querySelector('#nav')  // id选择器 前要加 # 
        console.log(nava);
        var lis = document.querySelector('li') // 返回第一个元素对象 属性选择器钱不需要加符号
        console.log(lis);
    </script>

在这里插入图片描述

document.querySelectorAll 根据指定选择器返回

document.querySelectorAll(‘选择器’) 根据指定选择器返回

  // document.querySelectorAll('选择器') 根据指定选择器返回
        var boxall = document.querySelectorAll('.box')
        console.log(boxall);
        var liall = document.querySelectorAll('li')
        console.log(liall);

在这里插入图片描述

获取特殊元素（body、HTML）

获取 body元素
document.body 、、返回body元素
获取HTML元素
document.documentElement 、、返回HTML元素

<script>
        // 获取body元素
        var bodys = document.body
        console.log(bodys);
        console.dir(bodys);
        // 获取HTML 元素
        var htmls = document.documentElement
        console.log(htmls);
    </script>

在这里插入图片描述

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript、js组成 web API、DOM、获取元素的五种方法

js组成 web API、DOM、获取元素、ID 获取元素、标签名获取、HTML5新增获取、quertSelector、document.querySelectorAll、获取特殊元素（body、HTML）JS 的组成APIAPI 应用程序编程接口是一些预先定义的函数目的是提供应用程序与开发人员基于某软件或硬件得以访问一组编程的能力而又无需访问源码或理解内部工作机制的细节简单理解： API 是给程序员提供一种工具以便更轻松的实现想要完成的功能Web APIWeb API 是浏览
复制链接

扫一扫