原生js获取body/id/class/img/li

最新推荐文章于 2023-08-09 20:15:20 发布
最新推荐文章于 2023-08-09 20:15:20 发布
阅读量794 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34661750/article/details/113752156
版权
本文详细介绍了如何在HTML中使用DOM操作，包括body元素获取、id和class选择，以及img和li标签的抓取。通过实例演示了JavaScript如何控制网页内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取body/id/class/img/li

1.获取body

doucumnet.body
document.getElementsByTagName("body")[0]

2.获取id

document.getElementById("id")

3.获取class

document.getElementsByClassName("class")

4.获取img/li

document.getElementsByTagName("img")
document.getElementsByTagName("li")
HTML DOM Document 对象

附上菜鸟教程地址：
https://www.runoob.com/jsref/dom-obj-document.html

原生js方法购物车完整实现 利用localStorage
html5_javascript的博客
08-19 1480
利用localStorage实现 html页面3个分别是 productList 产品列表 details产品详情页 cartList购物车页面 1.productList.html 页面 <style> body,ul ,li{ padding: 0; margin: 0; } li{ list-style: none; } #prod
原生JS获取body
LMQ_949244171的博客
11-26 3807
原生js获取body 的方法 第一种： let s = `hello` document.getElementsByTagName("body")[0].innerHTML = s 第二种： let s = `hello` document.body.innerHTML = s 点个赞呗~
原生js获取body
11-08 1268
1. doucumnet.body 2. document.getElementsByTagName("body")[0] 转载于:https://www.cnblogs.com/norcoA3/p/6042510.html
Magento 获取当前页面body的class
yuxiaoqing19871003的专栏
06-07 1296
Mage::getBlockSingleton('page/html')->getBodyClass()
php body class,WordPress函数body_class、get_body_class详解
weixin_31591011的博客
04-01 297
重要：本文最后更新于2018-12-25 09:10:02，某些文章具有时效性，若有错误或已失效，请在下方留言或联系代码狗。WordPress给我们提供了几个可以生成不同名称的class函数，body_class顾名思义，就是用来生成body的class属性的函数，body_class函数会根据你在网站位置不同生成不同的class，利用这个属性，我们可以实现不同页面不同布局方式，比如首页无侧边栏，...
Javascript 获取标签的6个方法+获取html+获取body
demopy’s blog
12-27 1346
JS 获取标签的方法 通过class： document.getElementsByClassName(‘class名’);返回数组 通过name： document.getElementsByName(‘name名’);返回数组 通过id： document.getElementById(‘id名’)；返回一个对象 通过标签名： document.getElementsByTagName(‘标签名’);返回数组 通过通用选择器：document.querrySelector(‘可以写任何选择器 只能选择一
原生js和jquery实现图片轮播特效
10-24
body, div, ul, li, a, img { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decoration: none; } #wrapper { position: relative; } #banner { /* 自定义样式 */ } .imgList { overflow:...
原生JS实现图片懒加载之页面性能优化
10-17
原生js实现图片懒加载</title> *{ margin: 0; padding: 0; box-sizing: border-box; } ul{ overflow: hidden; list-style: none; } li{ float: left; width: 50%; height: 200px; padding: 10px; } li img{ ...
<html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> <meta http-equiv="Expires" content="0"> <title>新阕通信报价单</title> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/bootstrap/css/default.css"> <script src="/js/jquery-1.11.3.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap3-typeahead.min.js"></script> <script src="/js/jquery.form.js"></script> <script src="/js/b2b.js"></script> <script src="/js/watermark.js"></script> <!--[if lte IE 8]> <link rel="stylesheet" href="/bootstrap/css/ie8hack.css"> <![endif]--> <!--[if lt IE 9]> <script src="/js/html5shiv.min.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> <style> .nav > li > .tt { padding: 5px; } .nav-pills > li > a { border-radius: 4px;margin:5px 0px; } .text-center{vertical-align: middle;} </style> </head> <body class="ty_body" style="padding-bottom: 70px;"> <div class="container-fluid"> <div class="top_nav"> <nav class="navbar navbar-default topnavbar " style="margin:0px;"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href=""><img src="http://b2bimage.139erp.com/161234459505651070b2blogo.png?r=998363"></a> <span class="logo_bg"></span> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="nav_center"> <h4>新阕通信</h4> <div class="dropdown zxqq" style="display: none;"> <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> 在线客服 <span class="caret"></span> </a> <ul class="dropdown-menu qq-menu" r
最新发布
03-30
- **原生JS**：通过`<script>`标签直接编写代码 - **第三方库**：如jQuery简化DOM操作（需添加`<script src="jquery.js">`） #### 3. 关键技术点 1. **XMLHttpRequest对象**：虽然当前代码未使用，但它是Ajax通信...
原生JS实现手动轮播图效果实例代码
10-17
本文将详细介绍如何使用原生JavaScript实现手动轮播图效果。 首先，手动轮播图的实现需要对HTML、CSS和JavaScript有一定的理解。HTML负责页面结构，CSS用于样式设置，而JavaScript则用于实现动态交互功能。 在HTML...
取得一个页面的所有class
Prince_fmx的博客
08-28 817
因为js函数库并没有去取得所有class的函数， 原生js:         Document                                                       //获取所有的className var classNames=getAllClassName(); console
原生js添加class
gztrljh
11-29 1537
document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个 document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价 ...
javaScript：如何获取html中的元素对象
qq_52799985的博客
08-09 3347
通过获取HTML中的元素对象，JavaScript可以对网页进行动态交互、更新、响应用户操作、处理表单数据、动态加载和操作页面元素等，为网页提供交互性、动态性和实时性等特性，让用户获得更好的体验和更强的互动性。
原生JS实现增加删除class
小皮的博客
09-13 474
1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;style type="text/css"&gt; 5 .night-mode{ 6 background:#383838; 7 color:#888888; 8 } 9 &l...
js 关于动态添加class样式的学习
热门推荐
任重道远
05-04 2万+
 如果，我这里有一个需求。如下的页面代码&lt;body&gt; &lt;input type="button" value="红" id="btn1"/&gt; &lt;p id="p1"&gt; 2016年圣诞前的一个星期天下午，我推开窗，加州明媚的阳光洒在街道上，四季如春的旧金山和风拂面。对面屋外草地上金发碧眼的孩子们正兴奋的跑着跳着，看着家长给圣诞树装扮上满满的礼物 。眺望
body加class
weixin_46787337的博客
11-16 1800
有个需求要在vue里面给body动态的加样式。
js怎样获取元素有哪些类 class 原生js获取元素的类名
09-18 2万+
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
原生js动态添加class
guoyinshuai的博客
03-14 1万+
在点击切换的过程中，我们需要给被选中的子选项添加“active”，然后让其它子选项删除“active”名。 该怎么做呢？ 首先，通过JS取到所有tab的节点 var arr = document.getElementsByClassName("tab_item"); 然后只需在被选中的子节点加上.classList.add("类名")，比如： arr[i].classList.add...
js中事件绑定,$("body").on("click")与$("").click()区别
梦里回忆-专栏
10-07 1万+
事件绑定
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值