순수 JavaScript를 사용하여 DOM 요소 값 얻기

순수 JavaScript를 사용하여 DOM 요소 값 얻기

---

어떤 거기에 차이 이러한 솔루션 사이는?

해결책 1 :

function doSomething(id, value) {
  console.log(value);
  //...
}

<input id="theId" value="test" onclick="doSomething(this.id, this.value)" />

... 그리고 해결책 2 :

function doSomething(id) {
  var value = document.getElementById(id).value;
  console.log(value);
  //...
}

<input id="theId" value="test" onclick="doSomething(this.id)" />

---

예 , 가장 주목할 만합니다! 나는 두 번째 것이 작동하지 않을 것이라고 생각합니다 (그리고 작동 한다면 이식성이 좋지 않습니다 ). 첫 번째는 괜찮을 것입니다.

// HTML:
<input id="theId" value="test" onclick="doSomething(this)" />

// JavaScript:
function(elem){
    var value = elem.value;
    var id    = elem.id;
    ...
}

이것도 작동합니다.

업데이트 : 질문이 수정되었습니다. 이제 두 솔루션 모두 동일합니다.

---

두 번째 함수에는 다음이 있어야합니다.

var value = document.getElementById(id).value;

그러면 기본적으로 동일한 기능입니다.

---

두 번째 버전에서는에서 반환 된 문자열을 전달합니다 this.id. 요소 자체가 아닙니다.

그래서 id.value당신이 원하는 것을주지 않을 것입니다.

요소를 this.

doSomething(this)

그때:

function(el){
    var value = el.value;
    ...
}

---

참고 : 일부 브라우저에서는 다음과 같은 경우 두 번째 브라우저가 작동합니다.

window[id].value 

요소 ID는 전역 속성이지만 이것은 안전하지 않습니다 .

thisID로 다시 가져 오는 대신 요소를 전달하는 것이 가장 합리적 입니다.

---

개체 전달 :

doSomething(this)

개체에서 모든 데이터를 가져올 수 있습니다.

function(obj){
    var value = obj.value;
    var id = obj.id;
}

또는 id유일한 통과 :

doSomething(this.id)

객체를 가져오고 그 값 뒤에 :

function(id){
    var value = document.getElementById(id).value;  
}

---

효과를 보면 차이가 없습니다. 가치는 동일합니다. 그러나 더 많은 것이 있습니다 ...

해결책 3 :

function doSomething() {
  console.log( theId.value );
}

<input id="theId" value="test" onclick="doSomething()" />

DOM 요소에 id가 있으면 js에서 직접 사용할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/4173391/getting-dom-element-value-using-pure-javascript