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

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

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

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

1.根據(jù)id獲取元素

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

返回值是一個元素對象

案例:點擊按鈕彈框

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

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

返回值是一個偽數(shù)組

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

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

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

返回值是一個偽數(shù)組

案例:案例:點擊按鈕,改變所有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.根據(jù)類樣式的名字獲取元素 document.getElementsByClassName("類樣式的名字");

返回值是一個偽數(shù)組

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

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

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

返回值是一個元素對象

案例:點擊按鈕彈框

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

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

返回值是一個偽數(shù)組

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

<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 () {//根據(jù)選擇器的方式獲取元素var inputs = document.querySelectorAll(".text");for (var i = 0; i < inputs.length; i++) {    inputs[i].value = "碼仙";}    };</script></body>

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

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 北京环球北美考试院【官方网站】|北京托福培训班|北京托福培训 | 筛分机|振动筛分机|气流筛分机|筛分机厂家-新乡市大汉振动机械有限公司 | 网站优化公司_SEO优化_北京关键词百度快速排名-智恒博网络 | 安徽控制器-合肥船用空调控制器-合肥家电控制器-合肥迅驰电子厂 安徽净化板_合肥岩棉板厂家_玻镁板厂家_安徽科艺美洁净科技有限公司 | 间苯二酚,间苯二酚厂家-淄博双和化工 | 美的商用净水器_美的直饮机_一级代理经销商_Midea租赁价格-厂家反渗透滤芯-直饮水批发品牌售后 | 土壤有机碳消解器-石油|表层油类分析采水器-青岛溯源环保设备有限公司 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 游泳池设备安装工程_恒温泳池设备_儿童游泳池设备厂家_游泳池水处理设备-东莞市君达泳池设备有限公司 | 华夏医界网_民营医疗产业信息平台_民营医院营销管理培训 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 高扬程排污泵_隔膜泵_磁力泵_节能自吸离心水泵厂家-【上海博洋】 | 刚性-柔性防水套管-橡胶伸缩接头-波纹管补偿器-启腾供水材料有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 广西教师资格网-广西教师资格证考试网 | 爱科技iMobile-专业的科技资讯信息分享网站 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 不锈钢水管-不锈钢燃气管-卫生级不锈钢管件-不锈钢食品级水管-广东双兴新材料集团有限公司 | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 | 百度网站优化,关键词排名,SEO优化-搜索引擎营销推广 | 门禁卡_智能IC卡_滴胶卡制作_硅胶腕带-卡立方rfid定制厂家 | 膜结构_ETFE膜结构_膜结构厂家_膜结构设计-深圳市烨兴智能空间技术有限公司 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 优宝-汽车润滑脂-轴承润滑脂-高温齿轮润滑油脂厂家 | 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 众品地板网-地板品牌招商_地板装修设计_地板门户的首选网络媒体。 | 多米诺-多米诺世界纪录团队-多米诺世界-多米诺团队培训-多米诺公关活动-多米诺创意广告-多米诺大型表演-多米诺专业赛事 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 餐饮加盟网_特色餐饮连锁加盟店-餐饮加盟官网| 高速混合机_锂电混合机_VC高效混合机-无锡鑫海干燥粉体设备有限公司 | 江苏齐宝进出口贸易有限公司 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备| 单级/双级旋片式真空泵厂家,2xz旋片真空泵-浙江台州求精真空泵有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司 | 大型低温冷却液循环泵-低温水槽冷阱「厂家品牌」京华仪器_京华仪器 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 乐泰胶水_loctite_乐泰胶_汉高乐泰授权(中国)总代理-鑫华良供应链 | 爱德华真空泵油/罗茨泵维修,爱发科-比其尔产品供应东莞/杭州/上海等全国各地 | 广州工业氧气-工业氩气-工业氮气-二氧化碳-广州市番禺区得力气体经营部 |