【2021-09-15】JS学习（八）--DOM

最新推荐文章于 2024-04-27 05:36:48 发布

qq_52691800

最新推荐文章于 2024-04-27 05:36:48 发布

阅读量76

点赞数

分类专栏： JS学习文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_52691800/article/details/120532569

版权

这篇博客详细介绍了DOM（文档对象模型）在JavaScript中的应用，包括Document类型的方法如getElementById、getElementsByClassName等，Element类型的相关属性和操作，以及Text和Comment类型的节点操作。还讨论了如何创建、追加、插入和删除DOM节点。

摘要由CSDN通过智能技术生成

十四、DOM

DOM 文档对象模型 js操作html、xml文档的api 1998年10月 IE中的DOM对象是以COM对象的形式实现的

实例化
    1. 通过dom拿到我们想要的节点

        var myDiv = document.getElementById("myDiv");
        console.log(myDiv);
        var div1 = document.getElementById("div1");
        console.log(div1);

    2. 通过dom创建节点

        // 创建一个li节点
        var node = document.createElement("LI");
        // 创建一个text节点
        var textNode = document.createTextNode("Hello");
        // 将text节点追加到li节点上
        node.appendChild(textNode);
        // 找到id为myDiv的节点
        var myDiv = document.getElementById("myDiv");
        // 将刚刚创建的node节点追加为myDiv的子节点
        myDiv.appendChild(node);

1. Document类型

表示整个html文档属性：

body 直接指向body元素
head 获取html头部内容
title 获取文档标题
doctype 获取<!DOCTYPE> 兼容性不太强很少用
URL 获取完整的URL
domain 获取域名
referrer 获取链接到当前页面的那个页面的url
images 获取页面所有的img对象返回值HTMLCollection
forms 获取所有的form对象返回值HTMLCollection
links 获取文档中带有href属性的a元素

方法： 1. getElementById("") 作用：通过元素的id获取元素节点调用者：参数：想要获取的元素id 返回值：找到的第一个元素，如果没有，返回null

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="time">2019-9-9</div>
    <script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法 
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElement('time');
console.log(timer);//2021-09-09
console.log(typeof timer);//object
 //5. console.dir 打印返回的元素对象，更好的查看里面的属性和方法
 console.dir(timer);
  </script>
</body>

</html>

getElementsByClassName("app app1") 作用：通过元素的class name 获取元素节点调用者： document 参数：为一个字符串表示元素的类名可以由空格隔开返回值： HTMLCollection list 包含一个或多个元素可以使用数组的操作方式去处理结果

getElementsByTagName("") 作用：通过元素的元素名（标签名）找到对应的元素调用者： document 参数：为一个字符串表示元素的元素名（标签名）返回值： HTMLCollection list 包含一个或多个元素可以使用数组的操作方式去处理结果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>知否</li>
        <li>知否</li>
        <li>知否</li>   
        <li>知否</li>
    </ul>
    <ol>
        <li>红绿</li>
        <li>红绿</li>
        <li>红绿</li>
        <li>红绿</li>
    </ol>
    <script>
    // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);

        }
        // 3. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTag

最低0.47元/天解锁文章

qq_52691800

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【2021-09-15】JS学习（八）--DOM

十四、DOMDOM 文档对象模型 js操作html、xml文档的api 1998年10月 IE中的DOM对象是以COM对象的形式实现的实例化 1. 通过dom拿到我们想要的节点 var myDiv = document.getElementById("myDiv"); console.log(myDiv); var div1 = document.getElementById("div1"); console.log(d...
复制链接

扫一扫