惠州定制网站制作推荐,正能量软件不良网站免费入口,缪斯装饰设计有限公司,网站设计联系电话目录 一、getElementsByTagName1.说明2.用法示例 二、getElementsByName1.说明2.用法示例 三、getElementById1.说明2.用法示例 四、getElementsByClassName1.说明2.用法示例 五、querySelector1.说明2.用法示例 六、querySelectorAll1.说明2.用法示例 七、综合示例 一、getEle… 目录 一、getElementsByTagName1.说明2.用法示例 二、getElementsByName1.说明2.用法示例 三、getElementById1.说明2.用法示例 四、getElementsByClassName1.说明2.用法示例 五、querySelector1.说明2.用法示例 六、querySelectorAll1.说明2.用法示例 七、综合示例 一、getElementsByTagName
1.说明
getElementsByTagName 俗称标签选择器可以根据标签名查找匹配到页面的元素对象返回为一个数组。
2.用法示例
获取所有 p 标签的文本。
!DOCTYPE html
htmlheadmeta charsetutf-8
/headbodybutton onclickalertInfo(); 获取p标签文本 /buttonp这是第一段文本aaaa/pp这是第二段文本bbbb/pp这是第三段文本cccc/pp这是第四段文本dddd/p
/body
scriptfunction alertInfo() {const matches document.getElementsByTagName(p);let pText ;for (const el of matches) {pText pText el.innerText \n;}alert(p标签文本是\n pText);}
/script/html二、getElementsByName
1.说明
getElementsByName 俗称name选择器可以根据name属性的值查找匹配到页面的元素对象返回为一个数组。
2.用法示例
!DOCTYPE html
htmlheadmeta charsetutf-8
/headbodybutton onclickalertInfo(); 获取name为test的文本 /buttonp这是第一段文本aaaa/pp nametest这是第二段文本bbbb/pp nametest这是第二段文本cccc/p/body
scriptfunction alertInfo() {const matches document.getElementsByName(test);let test ;for (const el of matches) {test test el.innerText \n;}alert( test);}
/script/html三、getElementById
1.说明
getElementById 俗称 id 选择器 getElementById(id) 方法查找并返回一个与页面中 id 相匹配的元素对象。
一般来说 id 在页面中应该是唯一的因此该方法是快速访问特定元素的方法如果页面中的两个或多个元素具有相同的 id则此方法返回找到的第一个元素。
2.用法示例
两个 p 标签含有一样的 id getElementById 方法只会返回找到的第一个元素所以点击按钮后只有第一段文字的颜色会改变。
html langen
headtitlegetElementById 示例/title
/head
bodyp idpara这是第一段测试文字/pp idpara这是第二段测试文字/pbutton onclickchangeColor(blue);蓝色/buttonbutton onclickchangeColor(red);红色/button
/body
scriptfunction changeColor(newColor) {const elem document.getElementById(para);elem.style.color newColor;}
/script
/html四、getElementsByClassName
1.说明
getElementsByClassName 俗称 class 选择器 getElementsByClassName(class) 方法查找页面上所有类名为 class 的元素对象返回为一个数组。方法里面要查找的多个类名之间用空格分隔。
2.用法示例
(1)获取所有 class“test” 的元素
document.getElementsByClassName(test);(2)获取同时具有 ‘red’ 和 ‘test’ 类的所有元素
document.getElementsByClassName(red test);(3)获取 id“main” 的元素且内部具有 class“test” 的所有元素
document.getElementById(main).getElementsByClassName(test);(4) 获取第一个 class“test” 的元素如果没有匹配的元素返回undefined
document.getElementsByClassName(test)[0];(5)简单示例
!DOCTYPE html
html
headmeta charsetutf-8
/head
bodybutton onclickchangeColor(); 改变第一段文字颜色 /buttondiv classinfo 这是第一段文字/divdiv classinfo 这是第二段文字/div
/body
scriptfunction changeColor() {const infos document.getElementsByClassName(info);infos[0].style.color red;}
/script
/html五、querySelector
1.说明
querySelector 是元素选择器可用于 id 和 class 选择也就是上面 getElementById 和 getElementsByClassName 能做到的 querySelector 也能做到并且 querySelector 还能用于其他复杂的元素选择场景最后返回查找的元素。
2.用法示例
(1) 获取标签名叫 “select” 和 “html” 的元素
!DOCTYPE html
htmlheadmeta charsetutf-8
/headbodylabel fortheme选择主题/labelselect idthemeoption valuewhite白/optionoption valueblack黑/option/selecth1这是我的网页/h1/body
scriptconst select document.querySelector(select);const html document.querySelector(html);document.body.style.padding 10px;function update(bgColor, textColor) {html.style.backgroundColor bgColor;html.style.color textColor;}select.addEventListener(change, () select.value black? update(black, white): update(white, black),);
/script/html(2) 获取 DOM中第一个 id “box” 的元素
document.querySelector(#box) (3) 获取DOM中第一个 class “box” 的元素
document.querySelector(.box) (4) 选择器中逗号分割表示或者
querySelector 里可用逗号分割来表示或者的意思下面的示例姓名输入框在年龄输入框前所以获取到的是姓名若年龄输入框在前就会获取到年龄。
!DOCTYPE html
htmlheadmeta charset utf-8
/headbodybutton onclick alertInfo(); 获取姓名 /buttondiv 姓名 input name login classname value 张三 /年龄 input name logina classagevalue 18 //div
/body
scriptfunction alertInfo() {//获取classname的input元素或者classage的input元素const el document.querySelector(input.name,input.age);alert(姓名或年龄是 el.value);}
/script/html(5) 复杂场景的选择器使用
查找页面 div 标签里 class“user-panel main” 的元素中 第一个 name “login” 的 input 元素。
!DOCTYPE html
htmlheadmeta charset utf-8style.user-panel{margin-top: 25px;}.main{margin-left: 10px;}/style
/headbodybutton onclick alertInfo(); 获取姓名 /buttondiv class user-panel main 姓名 input name login value 张三 //divdiv class user-panel main 年龄 input name logina value 18 //div
/body
scriptfunction alertInfo() {const el document.querySelector(div.user-panel.main input[namelogin]);alert(输入的姓名是 el.value);}
/script/html六、querySelectorAll
1.说明
querySelectorAll 选择器和 querySelector 选择器相似只不过 querySelector 返回的是匹配的一个元素querySelectorAll 返回的是匹配的多个元素即数组类型。
2.用法示例
1获取所有p标签元素
!DOCTYPE html
htmlheadmeta charset utf-8
/headbodybutton onclick alertInfo(); 获取姓名 /buttonp这是第一段文本aaaa/pp这是第二段文本bbbb/p
/body
scriptfunction alertInfo() {//获取所有p标签元素const firstP document.querySelectorAll(p)//选取第一个p标签里的内容输出alert( firstP[0].innerText);}
/script/html(2)获取元素下的所有子元素
获取 id“two” 的 div 元素然后获取其中 class“highlighted” 的 div 元素下是所有 p 标签。
!DOCTYPE html
htmlheadmeta charsetutf-8style.highlighted {color: aqua;}/style
/headbodybutton onclickalertInfo(); 获取姓名 /buttondiv idfirstp这是第一段文本aaaa/pp这是第二段文本bbbb/p/divdiv idtwop这是第三段文本cccc/pp这是第四段文本dddd/pdiv classhighlightedp这是第五段文本eeee/pp这是第六段文本ffff/p/div/div/body
scriptfunction alertInfo() {const container document.querySelector(div#two);const matches container.querySelectorAll(div.highlighted p);let highlighText ;for (const el of matches) {highlighTexthighlighTextel.innerText\n;}alert(高亮文本是\nhighlighText);}
/script/html七、综合示例
1.点击按钮将会弹出弹窗。
!DOCTYPE html
htmlheadmeta charsetutf-8
/headbodybutton 点击 /button
/body
scriptlet btn document.querySelector(button);btn.addEventListener(click, alterFun);function alterFun(){alert(你好!);};/script
/html2.点击按钮将会在页面上新增一个百度超链接并设置一些简单的样式。
headmeta charsetutf-8
/headbodybutton 点击 /button
/body
scriptlet btn document.querySelector(button);btn.addEventListener(click, addA);function addA() {let newA document.createElement(a);newA.href https://www.baidu.com;newA.innerText 百度;newA.style.color red;newA.style.marginLeft 100px;newA.target _blank;document.body.appendChild(newA);}
/script/html3.点击改变按钮将会 改变div里的两段文字并在其中增加a标签点击还原第一段文字按钮将还原第一段文字。
!DOCTYPE html
htmlheadmeta charsetutf-8style.b2 {color: coral;}.info{color: aqua;}/style
/headbodybutton idb1 改变 /buttonbutton classb2 还原第一段文字 /buttondiv classinfo 这是第一段文字/divdiv classinfo 这是第二段文字/div
/body
script//获取所有id为“b1”的元素并将它们存储在名为“elements”的变量中let btn1 document.getElementById(b1);btn1.addEventListener(click, change);function change() {//遍历所有class为“info”的元素,修改其中的文本和字体颜色并在其中加入一个a标签链接let elements document.getElementsByClassName(info);for (let element of elements) {//改变标签里的文字和颜色element.innerText 这是一段新的文字;element.style.color red;//添加a标签let newA document.createElement(a);newA.href https://www.baidu.com;newA.innerText 百度;newA.style.marginLeft 100px;newA.target _blank;element.appendChild(newA);}}//还原第一段改变的文字和颜色let btn2 document.getElementsByClassName(b2);btn2[0].addEventListener(click,reset);function reset() {let infoDiv document.getElementsByClassName(info);infoDiv[0].innerText 这是一段文字;infoDiv[0].style.color aqua;}/script/html参考
Document: getElementById() method
Document: getElementsByName() method
Document: querySelector() method
Document: querySelectorAll() method
