基本語法: document.querySelector(CSS selectors)
這個方法可以用來抓指定的html物件
以下為範例碼
<html>
<head></head>
<body>
TITLE:<input type="text" id="title" />
<input type="button" onclick="btn1_func()" value="btn1">
<br /><br />
<form id="form1">
FORM1.CONTENT:<input type="text" id="content" />
<input type="button" onclick="btn2_func()" value="btn2">
</form>
</body>
</html>
<script>
var btn1_func = function(){
var titleDOM = document.querySelector('#title');
if(titleDOM){
var title = titleDOM.value;
alert(title);
}
};
var btn2_func = function(){
var form = document.querySelector('#form1');
if(form){
var contentDOM = form.querySelector('#content');
if(contentDOM){
var content = contentDOM.value;
alert(content);
}
}
};
</script>
var titleDOM = document.querySelector('#title');
var title = titleDOM.value;
titleDOM這邊就會變成<input type="text" id="title" />這個元素了,也就可以進一步抓到文字框裡面的文字
要抓某個form裡的某個html元素也可以這樣用
var form = document.querySelector('#form1');
先抓到那個form表單的物件
var contentDOM = form.querySelector('#content');
再抓form表單裡指定的物件給contentDOM
var content = contentDOM.value;
這樣也就可以抓到form裡面某個文字框的文字了
滿方便的
不過此語法也有一些瀏覽器的相容性問題
參考連結
https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelector
https://www.w3schools.com/jsref/met_document_queryselector.asp
留言列表