web -APIS（dom和BOM)

2021-12-22 21:36:34 阅读：108 来源： 互联网

标签：web ol console log dom 标签元素 li BOM

前言：js的基础就是为了浏览器web端服务，所以有必要知道一下web端的api也就是接口，结合那个web-API的ppt来看。

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

dom 就是document文档的意思，一个页面就是一个文档，里面的各个标签，包括html和a标签，这些都是它的元素，所有的标签都是元素，

getElentById获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElentById获取元素</title>

</head>

<body>
    <div id="time">2021-12-22</div>

    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
        // 2. get 获取 element元素by 通过 驼峰命名法
        // 3. 参数 id 是大小写敏感的字符串，所以记得加 ''
        // 4. 返回的是一个元素对象
        const getElement = document.getElementById('time')

        console.log(getElement);
        // 查看标签对象的类型 ，所有的标签都是对象。
        console.log(typeof getElement); // object

        // 5.console.dir打印我们返回的元素对象 根号的查看里面的属性和方法
        console.dir(getElement)
    </script>
</body>

</html>

getElementByTagName获取某些元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementByTagName获取某些元素</title>
</head>

<body>
    <ul>
        <li>知否应是红绿肥瘦</li>
        <li>知否应是红绿肥瘦</li>
        <li>知否应是红绿肥瘦</li>
        <li>知否应是红绿肥瘦</li>
        <li>知否应是红绿肥瘦</li>
    </ul>

    <ol id="ol">
        <li>聪明绝顶</li>
        <li>聪明绝顶</li>
        <li>聪明绝顶</li>
    </ol>

    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的,它把八个li都给合在了一起
        const lis = document.getElementsByTagName('li')
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采用遍历的方式

        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        const ol = document.getElementsByTagName('ol')
        console.log(ol); //它是个伪数组，里面只有【ol】所以去里面找它的子元素li没有，
        //它不能自己找自己
        // 3.如果页面中只有一个li 返回的还是伪数组的形式
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5.element.getElementByTagName('标签名');父元素必须是指定的单个元素，所以必须是ol[0]指定ol的第一个。
        //不可以
        // console.log(ol.getElementsByTagName('li'));

        console.log(ol[0]); //ol的第0个里面是它所有的li和它自己。
        console.log(ol[0].getElementsByTagName('li'));

        // 我们一般用id挑选,感觉就是要找到唯一性，不然它咋整啊

        const oll = document.getElementById('ol')
        console.log(oll.getElementsByTagName('li'));
    </script>
</body>

</html>

标签：web,ol,console,log,dom,标签,元素,li,BOM
来源： https://www.cnblogs.com/LuDuo/p/15721164.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

web -APIS（dom和BOM)