基本語法: 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裡面某個文字框的文字了

滿方便的

 

不過此語法也有一些瀏覽器的相容性問題

sup.jpg

 

參考連結

https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelector

https://www.w3schools.com/jsref/met_document_queryselector.asp

arrow
arrow

    迪卡迪卡維 發表在 痞客邦 留言(0) 人氣()