當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

dom相关的api操作

發(fā)布時(shí)間：2024/1/18 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 dom相关的api操作小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?ul>li{$}*5

節(jié)點(diǎn)之間的關(guān)系(極少用)

空行+注釋+沒標(biāo)簽包括的文字也算是一個(gè)節(jié)點(diǎn)

子節(jié)點(diǎn):

// 1.獲取節(jié)點(diǎn)的導(dǎo)航var bodyEl = document.body// 1.1.獲取body所有的子節(jié)點(diǎn)// console.log(bodyEl.childNodes)// 1.2.獲取body的第一個(gè)子節(jié)點(diǎn)var bodyElFirstChild = bodyEl.firstChild// 1.3.獲取body中的注釋var bodyElCommentChild = bodyElFirstChild.nextSiblingconsole.log(bodyElCommentChild)// 1.4.獲取body的父節(jié)點(diǎn)var bodyParent = bodyEl.parentNodeconsole.log(bodyParent)

?此處 text指的是body下的第一個(gè)換行符,如果寫成這樣,text消失,第一個(gè)節(jié)點(diǎn)內(nèi)容為注釋

<body>我是文本, 呵呵呵

? 輸出所有子節(jié)點(diǎn):

? console.log(bodyEl.childNodes)

? ?console.log(bodyEl.firstChild)

var bodyELTextChild=bodyElFirstChild.nextSiblingconsole.log(bodyELTextChild)

元素之間的關(guān)系

.children[0]=.firstElementChild

firstchild用于節(jié)點(diǎn)而不是元素導(dǎo)航

children[index]比firstElementChild更常用

var bodyEl = document.body// 根據(jù)body元素去獲取子元素(element)var childElements = bodyEl.childrenconsole.log(childElements)// 獲取box元素var boxEl1 = bodyEl.firstElementChildvar boxEl2 = bodyEl.children[0]console.log(boxEl1, boxEl2, boxEl1 === boxEl2)// 獲取ul元素var ulEl = boxEl1.nextElementSiblingconsole.log(ulEl)// 獲取li元素var liEls = ulEl.childrenconsole.log(liEls)

注意這里是children不是child不是childelement

? ? var childElements=bodyEL.children

里面的第四個(gè)script是live server給瀏覽器注入的,無視掉

var boxEl=bodyEL.firstElementChildconsole.log(boxEl)console.log(bodyEL.children[0])

?注意這里是firstElementChild不是firstchild

輸出body第一個(gè)元素boxdiv的下一個(gè)元素?ul

console.log(boxEl.nextElementSibling)

?form和table之間的導(dǎo)航

var tableEl=document.body.firstElementChildconsole.log(tableEl.tHead)

得到表格的第三行?

var tableEl=document.body.firstElementChild // console.log(tableEl.tHead,tableEl.tBodies,tableEl.tFoot)// console.log(tableEl.rows)console.log(tableEl.rows[2])

打印出第三行的第一列內(nèi)容?

var tableEl=document.body.firstElementChild console.log(tableEl.rows[2].cells[0])

?確定是第幾列以及位于thead/tbody/tfoot中的索引

var tableEl=document.body.firstElementChild var rowEl=tableEl.rows[2]console.log(rowEl.rowIndex)console.log(rowEl.sectionRowIndex)

?獲取form元素

formEl=document.body.firstElementChild// console.log(formEl)// console.log(document.forms[0])var inputEl=formEl.children[0]var inputEl1=formEl.elements.passwordconsole.log(inputEl,inputEl1)

?獲取input輸入的value

formEl=document.body.firstElementChild// console.log(formEl)// console.log(document.forms[0])var inputEl=formEl.children[0]var inputEl1=formEl.elements.password// console.log(inputEl,inputEl1)setTimeout(function(){console.log(inputEl1.value)},2000)

?element導(dǎo)航的實(shí)際運(yùn)用(表格)

要求:將表格的對(duì)應(yīng)格子設(shè)置為bgc為紅色,字體為白色

? var tableEl = document.body.firstElementChildfor (var i = 0; i < tableEl.rows.length; i++){var rowEl1 = tableEl.rows[i]var cellEl1 = rowEl1.cells[i]cellEl1.style.backgroundColor="red"cellEl1.style.color="white"}

?易錯(cuò):backgroundColor此處C大寫且red被雙引號(hào)包裹起來

任意地獲取元素

按照原來的思維,每一步都是固定死的

當(dāng)嵌套太深時(shí),導(dǎo)航非常不方便

ByName常見于input,ByTag用于統(tǒng)一標(biāo)簽,幾乎不用

用的最多的是queryselector與類/id選擇器?

可以在元素上調(diào)用指的是不僅支持document.xxx,同時(shí)還支持bodyEl.xxx(此處bodyEl是元素)

實(shí)時(shí)指的是如果修改后是否會(huì)動(dòng)態(tài)修改

按照之前的寫法,一步步查找

var bodyEl = document.bodyvar boxEl = bodyEl.firstElementChildvar containerEl = boxEl.children[1]var pEl = containerEl.children[0]var spanEl = pEl.children[0]spanEl.style.color = "red"

?通過類名獲取元素

// 1.通過className獲取元素var keywordEls = document.getElementsByClassName("keyword")// // 修改第一個(gè)// keywordEls[0].style.color = "red"// 修改所有的for (var i = 0; i < keywordEls.length; i++) {keywordEls[i].style.color = "red"}

?通過id名獲取元素

var titleEl=document.getElementById("title")titleEl.style.color="orange"

通過選擇器查詢querySelector

var keywordEl = document.querySelector(".keyword")keywordEls是對(duì)象, 可迭代的// 可迭代對(duì)象: String/數(shù)組/節(jié)點(diǎn)的列表var keywordEls = document.querySelectorAll(".keyword")for (var el of keywordEls) {el.style.color = "red"}console.log(keywordEls)var titleEl = document.querySelector("#title")titleEl.style.color = "orange"

querySelector只查找第一個(gè),selectorAll是查找所有

(".keyword")與("#title")

? ? var keywordEl = document.querySelector(".keyword")

? ? // keywordEls是對(duì)象, 可迭代的,所以支持for of循環(huán)

? ? // 可迭代對(duì)象: String/數(shù)組/節(jié)點(diǎn)的列表

節(jié)點(diǎn)的屬性

nodeType屬性:返回?cái)?shù)值

注釋節(jié)點(diǎn)/元素節(jié)點(diǎn)/文字節(jié)點(diǎn)的nodeType返回值不同

nodeType屬性返回值是數(shù)值

? ? console.log(commentNode.nodeType,textNode.nodeType,divNode.nodeType)

左側(cè)常量使用方式:

默認(rèn)Node.ELELMENT_NODE=8?

nodeName與TagName屬性:返回文本

? ? console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName)

? ? console.log(commentNode.tagName, divNode.tagName)

?TagName只針對(duì)元素,如果不是元素,返回undefined

Iinner/outHTML屬性與textContent屬性-元素類節(jié)點(diǎn)獲取內(nèi)容?

? ? console.log(divNode.innerHTML)

innerHTML會(huì)把元素的標(biāo)簽名也拿到

?console.log(divNode.outerHTML)

console.log(divNode.textContent)

textContent只拿文本內(nèi)容

如果想要使用這兩個(gè)進(jìn)行替換文本

? ? divNode.innerHTML = "<h2>呵呵呵呵</h2>"

此處h2會(huì)被瀏覽器解析

? ? divNode.textContent = "<h2>嘿嘿嘿嘿</h2>"

此處h2默認(rèn)為文本,不會(huì)解析

data屬性-非元素節(jié)點(diǎn)獲取內(nèi)容

? ? console.log(commentNode.data, textNode.data, divNode.data)

?data屬性針對(duì)于非元素節(jié)點(diǎn)的內(nèi)容

元素的特性/屬性(attribute)

全局屬性-hidden屬性

全局屬性,id,class,style,hidden

hidden屬性為true即意為display=none

使用hidden屬性實(shí)現(xiàn)點(diǎn)擊按鈕切換顯示與隱藏功能

<button class="btn">切換</button><div id="box" class="cba" title="aaa" style="color: red">哈哈哈哈哈</div><script>// 1.獲取元素var boxEl = document.querySelector("#box")var btnEl = document.querySelector(".btn")btnEl.onclick=function(){boxEl.hidden=!boxEl.hidden}// 2.監(jiān)聽btn的點(diǎn)擊btnEl.onclick = function() {// 1.只是隱藏// boxEl.hidden = true// boxEl.style.display = "none"// 2.切換// boxEl.hidden = false// if (boxEl.hidden === false) {// boxEl.hidden = true// } else {// boxEl.hidden = false// }// 3.直接取反// boxEl.hidden = !boxEl.hidden// }

瀏覽器在解析HTML元素時(shí)，會(huì)將對(duì)應(yīng)的attribute也創(chuàng)建出來放到對(duì)應(yīng)的元素對(duì)象上。
? 比如id、class就是全局的attribute，會(huì)有對(duì)應(yīng)的id、class屬性；
? 比如href屬性是針對(duì)a元素的，type、value屬性是針對(duì)input元素的；

屬性attribute的分類：
? 標(biāo)準(zhǔn)的attribute：某些attribute屬性是標(biāo)準(zhǔn)的，比如id、class、href、type、value等；
? 非標(biāo)準(zhǔn)的attribute：某些attribute屬性是自定義的，比如abc、age、height等；

元素屬性的操作

?對(duì)于所有的attribute訪問都支持如下的方法：
? elem.hasAttribute(name) — 檢查特性是否存在。
? elem.getAttribute(name) — 獲取這個(gè)特性值。
? elem.setAttribute(name, value) — 設(shè)置這個(gè)特性值。
? elem.removeAttribute(name) — 移除這個(gè)特性。
? attributes：attr對(duì)象的集合，具有name、value屬性；

<div id="abc" class="box" title="box"age="18" height="1.88">我是box</div><input type="checkbox" checked="checked"> var boxEl=document.querySelector(".box")// 1.所有的attribute都支持的操作console.log(boxEl.hasAttribute("AGE"), boxEl.hasAttribute("abc"), boxEl.hasAttribute("id"))console.log(boxEl.getAttribute("AGE"), boxEl.getAttribute("abc"), boxEl.getAttribute("id"))boxEl.setAttribute("id", "cba")boxEl.removeAttribute("id")var boxAttributes = boxEl.attributesfor (var attr of boxAttributes) {console.log(attr.name, attr.value)}// 2.通過getAttribute()一定是字符串類型var inputEl = document.querySelector("input")console.log(inputEl.getAttribute("checked"))

? attribute具備以下特征：
? 它們的名字是大小寫不敏感的（id 與 ID 相同）。
? 它們的值總是字符串類型的。

?↑但是checked這種我們更希望獲得布爾類型,所以字符串類型不太合適

對(duì)象屬性的操作(更多使用)

元素屬性叫attribute,對(duì)象屬性叫property

? ? var boxEl = document.querySelector(".box")

此處的boxEl是對(duì)象,boxEl.id是property

對(duì)于標(biāo)準(zhǔn)的attribute，會(huì)在DOM對(duì)象上創(chuàng)建與其對(duì)應(yīng)的property屬性：
? 在大多數(shù)情況下，它們是相互作用的
? 改變property，通過attribute獲取的值，會(huì)隨著改變；
? 通過attribute操作修改，property的值會(huì)隨著改變；
? 但是input的value修改只能通過attribute的方法；
? 除非特別情況，大多數(shù)情況下，設(shè)置、獲取attribute，推薦使用property的方式：
? 這是因?yàn)樗J(rèn)情況下是有類型的；

?這是因?yàn)樗J(rèn)情況下是有類型的,比如checked是布爾類型的true

<div id="abc" class="box" title="標(biāo)題"age="18" height="1.88">我是box</div><input type="checkbox" checked>賬號(hào): <input class="account" type="text"><button class="btn">設(shè)置input的值</button> var boxEl = document.querySelector(".box")console.log(boxEl.id, boxEl.title, boxEl.age, boxEl.height)// input元素var inputEl = document.querySelector("input")// if (inputEl.getAttribute("checked")) {// console.log("checkbox處于選中狀態(tài)")// }if (inputEl.checked) {console.log("checkbox處于選中狀態(tài)")}console.log(typeof inputEl.checked)// 2.attribute和property是相互影響的boxEl.id = "aaaaa"console.log(boxEl.getAttribute("id"))boxEl.setAttribute("title", "哈哈哈")console.log(boxEl.title)// 3.比較特殊的情況, input設(shè)置值(了解)var accountInputEl = document.querySelector(".account")var btnEl = document.querySelector(".btn")btnEl.onclick = function() {accountInputEl.setAttribute("value", "kobe")// 優(yōu)先級(jí)更高accountInputEl.value = "coderwhy"}

JS動(dòng)態(tài)修改樣式

? ? ? // 1.直接修改style

? ? ? // boxEl.style.color = "red"

? ? ? // boxEl.style.fontSize = "24px"

? ? ? // boxEl.style.backgroundColor = "green"

此處bgc與fz都是小駝峰形式,即fZ與bC

? 有時(shí)候我們會(huì)通過JavaScript來動(dòng)態(tài)修改樣式，這個(gè)時(shí)候我們有兩個(gè)選擇：
? 選擇一：在CSS中編寫好對(duì)應(yīng)的樣式，動(dòng)態(tài)的添加class；
? 選擇二：動(dòng)態(tài)的修改style屬性；←此法需要寫多個(gè)style語句添加,較為麻煩
? 開發(fā)中如何選擇呢？
? 在大多數(shù)情況下，如果可以動(dòng)態(tài)修改class完成某個(gè)功能，更推薦使用動(dòng)態(tài)class(提前寫好class的css樣式)；
? 如果對(duì)于某些情況，無法通過動(dòng)態(tài)修改class（比如精準(zhǔn)修改某個(gè)css屬性的值），那么就可以修改style屬性；
? 接下來，我們對(duì)于兩種方式分別來進(jìn)行學(xué)習(xí)。

? ? ? // 2.動(dòng)態(tài)的添加某一個(gè)class

? ? ? boxEl.className = "active"

但是此處className添加的類名會(huì)覆蓋原類名!!!

<div class="box">我是box</div>// 1.獲取boxElvar boxEl = document.querySelector(".box")// 2.監(jiān)聽點(diǎn)擊var counter = 1boxEl.onclick = function() {// 1.直接修改style// boxEl.style.color = "red"// boxEl.style.fontSize = "24px"// boxEl.style.backgroundColor = "green"// 2.動(dòng)態(tài)的添加某一個(gè)classboxEl.className = "active"// 3.動(dòng)態(tài)的修改boxEl的寬度boxEl.style.width = 100 * counter + "px"counter++}

元素的className與classList

元素的class attribute，對(duì)應(yīng)的property并非叫class，而是className：
? 這是因?yàn)镴avaScript早期是不允許使用class這種關(guān)鍵字來作為對(duì)象的屬性，所以DOM規(guī)范使用了className；
? 雖然現(xiàn)在JavaScript已經(jīng)沒有這樣的限制，但是并不推薦，并且依然在使用className這個(gè)名稱；

? 我們可以對(duì)className進(jìn)行賦值，它會(huì)替換整個(gè)類中的字符串。

? 如果我們需要添加或者移除單個(gè)的class，那么可以使用classList屬性。
? elem.classList 是一個(gè)特殊的對(duì)象：
? elem.classList.add (class) ：添加一個(gè)類
? elem.classList.remove(class)：添加/移除類。
? elem.classList.toggle(class) ：如果類不存在就添加類，存在就移除它。
? elem.classList.contains(class)：檢查給定類，返回 true/false。
? classList是可迭代對(duì)象，可以通過for of進(jìn)行遍歷

元素的style屬性

? <div class="box" style="background-color: aqua; color: white;">

? ? 我是box

? </div>

? ? // 2.如果將一個(gè)屬性的值, 設(shè)置為空的字符串, 那么是使用默認(rèn)值

? ? // boxEl.style.display = ""

? ? // boxEl.style.fontSize = ""?

? ? // 3.設(shè)置多個(gè)樣式

? ? // boxEl.style.fontSize = "30px"

? ? // boxEl.style.color = "red"

? ? boxEl.style.cssText = "font-size: 30px; color: red;"

多個(gè)樣式的寫法，我們需要使用cssText屬性：
? 不推薦這種用法，因?yàn)樗鼤?huì)替換整個(gè)字符串

讀取元素的style

var boxEl = document.querySelector(".box")console.log(boxEl.style.backgroundColor)// console.log(boxEl.style.fontSize)console.log(getComputedStyle(boxEl).fontSize)

?第一種讀取的是內(nèi)聯(lián)樣式

第二種是獲取全局樣式

HTML5的data-*自定義屬性

<div id="abc" class="box"data-age="18" data-height="1.88"></div><script>var boxEl = document.querySelector(".box")// 小程序開發(fā)中使用console.log(boxEl.dataset.age)console.log(boxEl.dataset.height)</script>

data-*自定義屬性可以避免調(diào)用getAttribute

創(chuàng)建/插入元素

? ? // 1.通過innerHTML(非常不推薦)

? ? // boxEl.innerHTML = `

? ? // ? <h2 class="title">我是標(biāo)題</h2>

? ? // `

l瀏覽器需要額外解析字符串,性能不高

且如果后序進(jìn)行操作,仍需再次獲取var boxEl = document.querySelector(".title")

那么目前我們想要插入一個(gè)元素，通常會(huì)按照如下步驟：
? 步驟一：創(chuàng)建一個(gè)元素；
? 步驟二：插入元素到DOM的某一個(gè)位置；
? 創(chuàng)建元素： document.createElement(tag)

插入元素的方式如下：
? node.append(...nodes or strings) —— 在 node 末尾插入節(jié)點(diǎn)或字符串，
? node.prepend(...nodes or strings) —— 在 node 開頭插入節(jié)點(diǎn)或字符串，
? node.before(...nodes or strings) —— 在 node 前面插入節(jié)點(diǎn)或字符串，
? node.after(...nodes or strings) —— 在 node 后面插入節(jié)點(diǎn)或字符串，
? node.replaceWith(...nodes or strings) —— 將 node 替換為給定的節(jié)點(diǎn)或字符串。

<span>111111</span><div class="box"><span class="box-first">呵呵呵呵</span><p>哈哈哈哈哈</p></div>var boxEl = document.querySelector(".box")// 1.通過innerHTML(不推薦)// boxEl.innerHTML = `// <h2 class="title">我是標(biāo)題</h2>// `// 2.真實(shí)創(chuàng)建一個(gè)DOM對(duì)象var h2El = document.createElement("h2")h2El.className = "title"h2El.classList.add("active")h2El.textContent = "我是標(biāo)題"// 3.將元素插入boxEl// boxEl.append(h2El)// boxEl.prepend(h2El)// boxEl.after(h2El)// boxEl.before(h2El)// boxEl.replaceWith(h2El, "abc")// 4.插入到span和p元素之間// var spanEl = document.querySelector("span")// var spanEl = boxEl.children[0]var spanEl = boxEl.querySelector("span")spanEl.after(h2El)

移除與復(fù)制元素

<button class="remove-btn">移除box</button><button class="clone-btn">復(fù)制box</button><div class="box"><h2>我是標(biāo)題</h2><p>我是文本, 哈哈哈哈哈</p></div>// 1.獲取元素var boxEl = document.querySelector(".box")var removeBtnEl = document.querySelector(".remove-btn")var cloneBtnEl = document.querySelector(".clone-btn")// 2.監(jiān)聽removeBtn的點(diǎn)擊removeBtnEl.onclick = function() {boxEl.remove()}// 3.復(fù)制boxvar counter = 0cloneBtnEl.onclick = function() {var newNode = boxEl.cloneNode(true)newNode.children[0].textContent = "我是標(biāo)題" + counter// boxEl.after(newNode)document.body.append(newNode)counter++}

?這里因?yàn)椴皇巧疃鹊?所以只有box的外面結(jié)構(gòu),里面內(nèi)容一點(diǎn)都沒有

?? ? ? var newNode = boxEl.cloneNode(true)

加上true之后就是深度的,會(huì)有子結(jié)構(gòu)

// 3.復(fù)制boxvar counter = 0cloneBtnEl.onclick = function() {var newNode = boxEl.cloneNode(true)newNode.children[0].textContent = "我是標(biāo)題" + counter// boxEl.after(newNode)document.body.append(newNode)}

?現(xiàn)在的方法不需要知道多個(gè)元素即可使用,舊方法了解即可

元素的大小與滾動(dòng)

? ? // 1.獲取樣式(局限性很強(qiáng))

? ? // var boxStyle = getComputedStyle(boxEl)

? ? // console.log(boxStyle.width, boxStyle.height)

可以獲取的內(nèi)容很少,只能獲取我們?cè)O(shè)置的東西并且有單位如px,但是如元素滾動(dòng)條長(zhǎng)度和滾動(dòng)到了哪里是獲取不到的

<div class="box">你去過國(guó)內(nèi)最美的地方是哪# 我去過國(guó)內(nèi)最美的地方是新疆喀納斯。喀納斯是一個(gè)美麗而神秘的地方，這里群山環(huán)抱，森林密布，湖水清澈，風(fēng)景奇特。為國(guó)家級(jí)5A級(jí)景區(qū)，國(guó)家地質(zhì)公園，國(guó)家森林公園。</div>var boxEl = document.querySelector(".box")// 1.獲取樣式(局限性很強(qiáng))var boxStyle = getComputedStyle(boxEl)console.log(boxStyle.width)// 2.獲取更多信息console.log(boxEl.clientWidth)console.log(boxEl.clientHeight)console.log(boxEl.clientLeft)console.log(boxEl.clientTop)console.log(boxEl.offsetWidth)console.log(boxEl.offsetHeight)console.log(boxEl.offsetLeft)console.log(boxEl.offsetTop)console.log(boxEl.scrollHeight)console.log(boxEl.scrollTop)// window對(duì)象window.onclick = function() {console.log(boxEl.scrollTop)}

window大小與滾動(dòng)

全局變量的使用細(xì)節(jié)

如果此處counter初始化在函數(shù)內(nèi)部,則每次點(diǎn)擊都是從1,不會(huì)增加,故要寫在外面作為全局變量

? ? addEl.onclick = function() {

? ? var counter = 0
? ? ? counter++
? ? ? h2El.textContent = counter
? ? }

<button class="add">+</button><button class="sub">-</button><h2 class="counter">0</h2>// 1.獲取按鈕var addEl = document.querySelector(".add")var subEl = document.querySelector(".sub")var h2El = document.querySelector(".counter")// 2.監(jiān)聽btnEl的點(diǎn)擊var counter = 0addEl.onclick = function() {counter++h2El.textContent = counter}subEl.onclick = function() {counter--h2El.textContent = counter}// var age = 18// function foo() {// age++// }// foo()// foo()// foo()// foo()// console.log(age)

案例:動(dòng)態(tài)創(chuàng)建列表

<h1>動(dòng)態(tài)創(chuàng)建列表</h1><ul class="list"></ul><script>var ulEl = document.querySelector(".list")var isFlag = truewhile (isFlag) {var message = prompt("請(qǐng)輸入信息:")if (!message) { // 沒有輸入內(nèi)容isFlag = false} else {var liEl = document.createElement("li")liEl.textContent = messageulEl.append(liEl)}}</script>

案例:完成倒計(jì)時(shí)案例

?案例:動(dòng)態(tài)顯示時(shí)間

且即刻變化?

<body><h1 class="time">2022-05-19 11:14:30</h1><script>// 封裝了工具函數(shù)function padLeft(content, count, padStr) {count = count || 2padStr = padStr || "0"content = String(content)return content.padStart(count, padStr)}// 1.獲取時(shí)間的元素var timeEl = document.querySelector(".time")setInterval(function() {// 2.獲取具體的時(shí)間并且進(jìn)行格式化var date = new Date()var year = date.getFullYear()var month = padLeft(date.getMonth() + 1)var day = padLeft(date.getDate())var hour = padLeft(date.getHours())var minute = padLeft(date.getMinutes())var second = padLeft(date.getSeconds())// 3.將時(shí)間放到timeEl中timeEl.textContent = `${year}-${month}-${day} ${hour}:${minute}:${second}`}, 1000);// 補(bǔ)充String方法// var str = "124"// console.log(str.padStart(4, "0"))</script></body>

總結(jié)

以上是生活随笔為你收集整理的dom相关的api操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： js前端获取扫码枪扫描的数据，打印条形码
下一篇：论文解读：Improving Machi