前端研习录（27）——JavaScript document方法讲解及示例分析

已于 2022-08-22 12:13:36 修改
阅读量1.6k 收藏 6
点赞数 1
分类专栏： 前端研习录 文章标签： 前端 javascript html5
于 2022-08-11 23:43:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WXKKang/article/details/126294717
版权

前端研习录（27）——JavaScript document方法讲解及示例分析

版权声明

  • 本文原创作者：清风不渡
  • 博客地址：https://blog.csdn.net/WXKKang

  重拾前端记忆，记录学习笔记，现在进入JavaScript document方法部分

一、document方法

1、获取元素

（1）document.getElementsByTagName()

  document.getElementsByTagName()方法通过标签名获取并返回符合条件的元素，它的返回值是一个类似数组对象（HTMLCollection实例），如果没有任何匹配的元素则返回一个空集，如果传入“*”，就可以返回文档中的所有HTML元素，示例如下:

<!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>清风不渡</title>
</head>
<body>

    <div>Hello Word</div>
    <div>My name is 清风不渡</div>

    <script>
        var divs = document.getElementsByTagName("div");
        for (var i = 0 ; i<divs.length ; i++){
            console.log(divs[i]);
        }
        
    </script>
</body>
</html>

  结果如下：
在这里插入图片描述

（2）document.getElementsByClassName()

  document.getElementsByClassName()方法通过class名获取并返回符合条件的元素，它的返回值是一个类似数组对象（HTMLCollection实例），示例如下：

<!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>清风不渡</title>
</head>
<body>

    <div class="hello">Hello Word</div>
    <div>My name is 清风不渡</div>

    <script>
        var divs = document.getElementsByClassName("hello");
        for (var i = 0 ; i<divs.length ; i++){
            console.log(divs[i]);
        }
        
    </script>
</body>
</html>

  结果如下：
在这里插入图片描述

注意：参数可以是多个class，中间用空格隔开即可

（3）document.getElementsByName()

  document.getElementsByClassName()方法通过name属性获取并返回符合条件的元素，它的返回值是一个类似数组对象（HTMLCollection实例），示例如下：

<!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>清风不渡</title>
</head>
<body>

    <form name = "user"></form>
    <img src="./img/1.webp" name = "user">

    <script>
        var divs = document.getElementsByName("user");
        for (var i = 0 ; i<divs.length ; i++){
            console.log(divs[i]);
        }
        
    </script>
</body>
</html>

  结果如下：
在这里插入图片描述

（4）document.getElementById()

  document.getElementsByClassName()方法通过id属性获取并返回符合条件的元素，如果没有匹配的元素节点则返回null，示例如下：

<!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>清风不渡</title>
</head>
<body>

    <div id="hello">Hello Word</div>
    <div id="my">My name is 清风不渡</div>

    <script>
        var my = document.getElementById("my");
        console.log(my);
        
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

（5）document.querySelector()

  document.querySelector() 方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果多个节点满足匹配条件，则返回第一个节点。如果没有匹配的节点则返回null，示例如下：

<!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>清风不渡</title>
</head>
<body>

    <div class="hello">Hello Word</div>
    <div class="hello">Hello China</div>
    <div class="my">My name is 清风不渡</div>

    <script>
        var hello = document.querySelector(".hello");
        console.log(hello);
        
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

（6）document.querySelectorAll()

  document.querySelectorAll()方法也是通过CSS选择器来返回匹配该选择器的所有元素节点，返回一个NodeList对象，示例如下：

<!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>清风不渡</title>
</head>
<body>

    <div class="hello">Hello Word</div>
    <div class="hello">Hello China</div>
    <div class="my">My name is 清风不渡</div>

    <script>
        var hello = document.querySelectorAll(".hello");
        for(var a = 0 ; a < hello.length ; a++){
            console.log(hello[a]);
        }
    </script>
</body>
</html>

  结果如下：

在这里插入图片描述

2、创建元素

（1）document.createElement()

  document.createElement()方法用来生成元素的节点，并返回该节点，示例如下：

<!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>清风不渡</title>
</head>
<body>

    <script>
        var newDiv = document.createElement("div");
        console.log(newDiv);
    </script>

</body>
</html>

  结果如下：
在这里插入图片描述

（2）document.createTextNode()

  document.createTextNode() 方法用来生成文本节点（Text实例），并返回该节点，它的参数是文本节点的内容，示例如下：

<!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>清风不渡</title>
</head>
<body>

    <script>
        var newDiv = document.createElement("div");
        var str = document.createTextNode("hello word");
        console.log(newDiv);
        console.log(str);
    </script>

</body>
</html>

  结果如下：

在这里插入图片描述

（3）document.createAttribute()

  document.createAttribute() 生成并返回一个新的属性节点，示例如下：

<!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>清风不渡</title>
</head>
<body>

    <script>
        var newDiv = document.createElement("div");
        var str = document.createTextNode("hello word");
        var className = document.createAttribute("class");
        console.log(newDiv);
        console.log(str);
        console.log(className);
    </script>

</body>
</html>

  结果如下：
在这里插入图片描述

3、示例

  那么我们现在尝试着通过上面的方法生成一个新的标签，并把它展示在页面上，示例如下：

<!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>清风不渡</title>
</head>
<body>
    
    <div id="box"></div>

    <script>
        //创建节点
        var newDiv = document.createElement("div");
        //创建文本内容
        var str = document.createTextNode("hello word");
        //创建class属性
        var calssName = document.createAttribute("class")
        //给class属性赋值
        calssName.value = "hello"
        //appendChild 将内容或子节点加到节点内部
        newDiv.appendChild(str);
        //将属性添加到节点中
        newDiv.setAttributeNode(calssName);
        //打印节点
        console.log(newDiv);

        //获取id为box的节点
        var box = document.getElementById("box");
        //将新创建的节点添加到box节点内部
        box.appendChild(newDiv);
        
    </script>

</body>
</html>

  结果如下：

在这里插入图片描述

清风不渡
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js document.createElement()的用法
06-19 2153
document.createElement()的用法 <br />      分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。<br /> <br />      document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新
JavaScript中document的四种方法
qiangzhogshou的博客
11-26 1万+
1、document的getElementById()方法 <body> <a id="first">a标签链接</a> <script> var element = document.getElementById("first"); console.log(element); </script> </body>...
JavaScript中Document全局对象用法（附代码自行演示）
最新发布
04-25 1135
在JavaScript中，document对象是浏览器提供的一个全局对象，它代表了当前网页的整个HTML文档。document对象提供丰富的属性和方法，允许开发者与HTML文档的内容进行交互，包括查找、创建、修改、删除元素以及处理文档结构和样式等。以下个人总结document对象的一些常见用法。
Javascript 创建书签小工具 （bilibili视频下载为例）
Just Code
12-12 1407
书签小工具（Bookmarklets）是一个非常棒的javascript代码小片断伪装成的小应用，它驻留在你的浏览器里并为网页提供额外的功能。这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践的建议。   我 们一直在寻找增加浏览体验的方法，有的方法众所周知，有的则鲜为人知。我原本认为书签小工具属于后者，非常令人讨厌的东西。令我非常懊恼的是我发现在这 个问题上我完全是错误的。...
JavaScript 通过标签获取元素（getElementsByTagName）
guoqingru0311的博客
08-15 6780
JavaScript 通过标签获取元素1、通过标签获取元素1、利用标签获取元素 1、通过标签获取元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用标签获元素</title> <script type="text/javascript"> window.onload=function
JAVA笔记—IO流
maohe的博客
08-21 890
流的原理及流的分类File类的使用File类的构造器//在构造时，new出来的依然是在内存层面路径分隔符问题路径分隔符File类的常用方法。
DevOps研习社:品质决定成败——漫谈非功能性需求
02-24
在互联网的世界里，“用户就是上帝”这句话只体现在支付环节。而在日常生活中，几乎每一个人都清楚的知道，不论是产品还是服务，品质决定竞争力，而对于一个软件、应用或者App来说，功能是生命线，确定能否安身立命...
汽车手套箱研习 PPT——22页.rar
09-19
汽车手套箱研习 PPT——22页.rar
陈安之超级成功学及研习会记录
11-13
你们想不想知道你们的未来是什么，教你们一种算命运的方法。 好！ 命运是如何产生的。 我们来看一下，11月1日，吉利的数字。在哪里，在上成功学的课，有没有人在这个人在这个教室的，有没有人跟他讲成功没有来的...
陈安之研习会记录
12-17
这是一款整理发布的陈安之研习会记录，它或许能给你不经意间的些许感悟，千万不要错过了陈安之...该文档为陈安之研习会记录，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
关于document.getElementById返回为null的解释
热门推荐
杨鹏飞的博客
11-06 2万+
关于'null'的解释，官方给出的是为空或不是对象:  document.getElementById为null  那是因为你没有获取到这个元素；你的js文件一定是在head标签中加载的， 这样的话，会产生加载的顺序问题； 如果你想那样写var search = document.getElementById("search_input"); 就必须在 里面加个defer=true属
html5小技巧之通过document.head获取head元素
12-13
今天，看一个国外网站发现人家获取head元素如下 复制代码代码如下:var head = document.head || document.getElementsByTagName(‘head’)[0]; 后面的是我们常用的方式，前面的 document.head 着实第一次见。查资料发现原来是html5的东东。的确简单了，一个属性搞定。 当然，IE6/7/8不支持。IE9/Safari/Chrome/FF/Opera均支持（最新版本）。记录下。 html4中HTMLDocument接口如下 html5中HTMLDocument接口如下 相关： http://www.w3.org/TR/
document 对象(DOM)---获取元素
小白的博客
07-24 5117
document 对象(DOM)—获取元素 文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。 DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。 获取元素 通过ID获取 getElementById()方法 getElementByName()方法 getElementByTagName()方法 g...
document.getElementById/Name/TagName返回值的小区别
qq_27346075的博客
04-23 1700
document.getElementById/Name/TagName这三个可以取得元素，分别通过查询id、name和标签名。但他们的返回值是有区别的。下面来看个简单的例子： &lt;div id="myDiv" name="sb" class="bd" title="Body text" lang="en" dir="ltr" my_special_attribu
只适用于HTML的DOM对象
weixin_34296641的博客
02-11 78
前面，已经学习了如何对树结构进行遍历，并添加、删除、修改任何XML文档中的节点。但是，还有一些对象和属性石只适用于HTML的。列如，document.body就是一个纯HTML对象。只要HTML文档中包含了body标签就可以访问，其功能等价于document.getElementsByTagName('body')[0]，但调用方式则要有好得多。 访问文档的基本方法 document.im...
JS中获取元素的方法
weixin_43765641的博客
09-11 4938
2、document.getElment.querySelectorAll('选择器') 获取拥有此选择器的元素，获取的是一个数组。1、document.getElement.querySelector('选择器') 获取该选择器的第一个元素。2、不只是通过document对象获取元素，也可以通过父元素获取子元素。document.getElementsByClassName('class名')document.getElementByid('id名')注意：1、获取多个元素的，获取到的都是数组。
js中document里的常用函数
youyajie的专栏
10-09 9628
js里要得到html中的元素，可以通过document里的函数获得。这样获得了html中的元素就可以方便的进行后续操作。获得html中的元素有三种方式，分别是通过id，name和tagname，其中html中元素的id要保持唯一，如果没有保持唯一的话，通过id方式获得的是html中的第一个此id的元素，此外id最好不要以数字开头，因为有些浏览器就会识别不出来，访问无效。通过name和tagname
浅谈HTML5 canvas（一）
筱葭的博客
03-24 5286
： HTML5添加的最受欢迎的功能就是元素，这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态在这个区域绘制图形。 主流浏览器都支持canvas，如IE9+、FireFox1.5+、Safari2+、Opera9+、Chrome、iOS版Safari及安卓版Webkit。 Canvas除了具备基本绘图能力的2D上下文，还有一个名为WebGL的3D上下文。目前支持canv
Javascript：DOM节点操作时无法更改body样式
fxalll的博客
03-10 969
开门见山。 新手学习Javascript关于DOM操作节点时会发现无法操作body更改样式，这是为什么呢？ 我一开始是这么写的： 'use strict' var body = document.getElementsByTagName('body'); body.style.backgroundColor = 'red'； 然而刷新页面后并没有任何效果，也就是说这段代码并没有成功执行。 我后来尝试使用以下代码： 'use strict' var body = document.getElementsBy
图书馆研习室在线预约系统.docx
09-10
图书馆研习室在线预约系统.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值