电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript中常見的幾種獲取元素的方式

瀏覽:171日期:2022-06-10 15:37:02

1.根據id獲取元素

document.getElementById("id屬性的值");

返回值是一個元素對象

案例:點擊按鈕彈框

<body><input type="button" value="彈框" id="btn"><script>    //根據id屬性的值從文檔中獲取這個元素    var btnobj = document.getElementById("btn");   //為當前的這個按鈕元素(對象),注冊點擊事件,添加事件處理函數(匿名函數)    btnobj.onclick = function () {//響應做的事情alert("碼仙");    };</script></body>

2.根據標簽名字獲取元素 document.getElementsByTagName("標簽的名字");

返回值是一個偽數組

案例:點擊按鈕改變多個p標簽的文字內容

<body><input type="button" value="改變" id="btn"><div id="dv">    <p>哈哈,我又變帥了</p>    <p>哈哈,我又變帥了</p>    <p>哈哈,我又變帥了</p>    <p>哈哈,我又變帥了</p>    <p>哈哈,我又變帥了</p></div><script>    //根據id獲取按鈕,注冊點擊事件,添加事件處理函數    document.getElementById("btn").onclick = function () {//根據標簽名字獲取標簽var pObjs = document.getElementsByTagName("p");//var pObjs=document.getElementById("dv1").getElementsByTagName("p");//循環遍歷這個數組for (var i = 0; i < pObjs.length; i++) {    //每個p標簽,設置文字    pObjs[i].innerText = "我們都是p";}    };</script></body>

3.根據name屬性的值獲取元素 document.getElementsByName("name屬性的值");

返回值是一個偽數組

案例:案例:點擊按鈕,改變所有name屬性值為name1的文本框中的value屬性值

<body><input type="button" value="顯示效果" id="btn"/><br/><input type="text" value="您好" name="name1"/><br/><input type="text" value="您好" name="name2"/><br/><input type="text" value="您好" name="name1"/><br/><input type="text" value="您好" name="name3"/><br/><input type="text" value="您好" name="name1"/><br/><input type="text" value="您好" name="name1"/><br/><script>    //點擊按鈕,改變所有name屬性值為name1的文本框中的value屬性值    document.getElementById("btn").onclick = function () {//通過name屬性值獲取元素-------表單的標簽var inputs = document.getElementsByName("name1");for (var i = 0; i < inputs.length; i++) {    inputs[i].value = "我很好";}    };</script></body>

4.根據類樣式的名字獲取元素 document.getElementsByClassName("類樣式的名字");

返回值是一個偽數組

案例:修改所有文本框的值

<body><input type="button" value="修改文本框的值" id="btn"/><br/><input type="text" value=""/><br/><input type="text" value=""/><br/><input type="text" value=""/><script>    //根據id獲取按鈕,為按鈕注冊點擊事件,添加事件處理函數    document.getElementById("btn").onclick = function () {//獲取所有的文本框//根據類樣式的名字獲取元素var inputs = document.getElementsByClassName("text");for (var i = 0; i < inputs.length; i++) {    inputs[i].value = "碼仙";}    };</script></body>

5.根據選擇器獲取元素 1.document.querySelector("選擇器");

返回值是一個元素對象

案例:點擊按鈕彈框

<body><input type="button" value="顯示效果1" id="btn"/><input type="button" value="顯示效果2"/><script>    //點擊按鈕彈出對話框    //根據選擇器的方式獲取元素    var btnObj1 = document.querySelector("#btn");    btnObj1.onclick = function () {alert("我變帥了");    };    var btnObj2 = document.querySelector(".btn");    btnObj2.onclick = function () {alert("哈哈,我又變帥了");    };</script></body>

2.document.querySelectorAll("選擇器");

返回值是一個偽數組

案例:修改所有文本框的值

<body><input type="button" value="修改文本框的值" id="btn"/><br/><input type="text" value=""/><br/><input type="text" value=""/><br/><input type="text" value=""/><script>    document.getElementById("btn").onclick = function () {//根據選擇器的方式獲取元素var inputs = document.querySelectorAll(".text");for (var i = 0; i < inputs.length; i++) {    inputs[i].value = "碼仙";}    };</script></body>

到此這篇關于JavaScript中常見的幾種獲取元素的方式的文章就介紹到這了,更多相關js 獲取元素內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 昆山PCB加工_SMT贴片_PCB抄板_线路板焊接加工-昆山腾宸电子科技有限公司 | 回转窑-水泥|石灰|冶金-巩义市瑞光金属制品有限责任公司 | 刮板输送机,粉尘加湿搅拌机,螺旋输送机,布袋除尘器 | 无锡网站建设_小程序制作_网站设计公司_无锡网络公司_网站制作 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | MOOG伺服阀维修,ATOS比例流量阀维修,伺服阀维修-上海纽顿液压设备有限公司 | 变压器配件,变压器吸湿器,武强县吉口变压器配件有限公司 | 搪瓷搅拌器,搪玻璃搅拌器,搪玻璃冷凝器_厂家-淄博越宏化工设备 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 机床主轴维修|刀塔维修|C轴维修-常州翔高精密机械有限公司 | 二维运动混料机,加热型混料机,干粉混料机-南京腾阳干燥设备厂 | 千斤顶,液压千斤顶-力良企业,专业的液压千斤顶制造商,shliliang.com | 色油机-色母机-失重|称重式混料机-称重机-米重机-拌料机-[东莞同锐机械]精密计量科技制造商 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 全自动包装秤_全自动上袋机_全自动套袋机_高位码垛机_全自动包装码垛系统生产线-三维汉界机器(山东)股份有限公司 | ET3000双钳形接地电阻测试仪_ZSR10A直流_SXJS-IV智能_SX-9000全自动油介质损耗测试仪-上海康登 | 高压贴片电容|贴片安规电容|三端滤波器|风华电容代理南京南山 | 安全光栅|射频导纳物位开关|音叉料位计|雷达液位计|两级跑偏开关|双向拉绳开关-山东卓信机械有限公司 | 浩方智通 - 防关联浏览器 - 跨境电商浏览器 - 云雀浏览器 | 短信通106短信接口验证码接口群发平台_国际短信接口验证码接口群发平台-速度网络有限公司 | 对照品_中药对照品_标准品_对照药材_「格利普」高纯中药标准品厂家-成都格利普生物科技有限公司 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 登车桥动力单元-非标液压泵站-非标液压系统-深圳市三好科技有限公司 | 破碎机_上海破碎机_破碎机设备_破碎机厂家-上海山卓重工机械有限公司 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 | 上海公众号开发-公众号代运营公司-做公众号的公司企业服务商-咏熠软件 | 智能楼宇-楼宇自控系统-楼宇智能化-楼宇自动化-三水智能化 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 生物颗粒燃烧机-生物质燃烧机-热风炉-生物颗粒蒸汽发生器-丽水市久凯能源设备有限公司 | 发电机组|柴油发电机组-批发,上柴,玉柴,潍柴,康明斯柴油发电机厂家直销 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 污水提升器,污水提升泵,地下室排水,增压泵,雨水泵,智能供排水控制器-上海智流泵业有限公司 | 上海平衡机-单面卧式动平衡机-万向节动平衡机-圈带动平衡机厂家-上海申岢动平衡机制造有限公司 | 金属回收_废铜废铁回收_边角料回收_废不锈钢回收_废旧电缆线回收-广东益夫金属回收公司 | 深圳装修_店面装修设计_餐厅设计_装修全包价格-尚泰装饰设计 | 数码听觉统合训练系统-儿童感觉-早期言语评估与训练系统-北京鑫泰盛世科技发展有限公司 | 纯水电导率测定仪-万用气体检测仪-低钠测定仪-米沃奇科技(北京)有限公司www.milwaukeeinst.cn 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 手术室净化装修-手术室净化工程公司-华锐手术室净化厂家 | 上海盐水喷雾试验机_两厢式冷热冲击试验箱-巨怡环试 |