코딩하다 현타올 때

질문 : 요소에 JavaScript의 클래스가 포함되어 있는지 확인하십시오. jQuery가 아닌 일반 JavaScript를 사용하여 요소에 클래스 가 포함되어 있는지 확인할 수있는 방법이 있습니까? 현재 나는 이것을하고있다 : var test = document.getElementById("test"); var testClass = test.className; switch (testClass) { case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "..

질문 : JavaScript를 사용하여 텍스트 입력 필드의 값을 어떻게 얻습니까? JavaScript로 검색 중입니다. 나는 양식을 사용하지만 내 페이지에서 다른 것을 엉망으로 만듭니다. 이 입력 텍스트 필드가 있습니다. 그리고 이것은 내 JavaScript 코드입니다. 텍스트 필드의 값을 JavaScript로 가져 오려면 어떻게합니까? 답변 입력 텍스트 상자 값을 직접 가져 오는 다양한 방법이 있습니다 (입력 요소를 양식 요소 내부에 래핑하지 않고). 방법 1 : document.getElementById('textbox_id').value 를 사용하여 원하는 상자의 값을 가져옵니다. 예를 들어, document.getElementById("searchTxt").value; 참고 : 방법 2,3,4 및..

질문 : jQuery로 쿠키를 어떻게 설정 / 설정 해제합니까? test 1 설정하는 것과 같이 jQuery를 사용하여 쿠키를 설정 및 설정 해제하는 방법은 무엇입니까? 답변 2019 년 4 월 업데이트 쿠키 읽기 / 조작에는 jQuery가 필요하지 않으므로 아래의 원래 답변을 사용하지 마십시오. 대신 https://github.com/js-cookie/js-cookie로 이동하고 jQuery에 의존하지 않는 라이브러리를 사용하십시오. 기본 예 : // Set a cookie Cookies.set('name', 'value'); // Read the cookie Cookies.get('name') => // => 'value' 자세한 내용은 github의 문서를 참조하십시오. 2019 년 4 월 이전 (..

질문 : 요소가 DOM에 표시되는지 확인 요소가 순수 JS (jQuery 없음)에서 표시되는지 확인할 수있는 방법이 있습니까? 예를 들어이 페이지에서 Performance Bikes 에서 거래 (상단 메뉴) 위로 마우스를 가져 가면 거래 창이 표시되지만 처음에는 표시되지 않았습니다. HTML에 있지만 보이지 않습니다. 그래서 DOM 요소가 주어 졌을 때 그것이 보이는지 여부를 어떻게 확인할 수 있습니까? 나는 시도했다 : window.getComputedStyle(my_element)['display']); 하지만 작동하지 않는 것 같습니다. 어떤 속성을 확인해야할지 궁금합니다. 내 마음에 : display !== 'none' visibility !== 'hidden' 내가 놓칠 수있는 다른 것이 있습니..

질문 : 라이브러리를 사용하지 않고 JavaScript에서 다른 요소 뒤에 요소를 삽입하는 방법은 무엇입니까? JavaScript에는 insertBefore() 가 있지만 jQuery 또는 다른 라이브러리를 사용하지 않고 다른 요소 뒤에 요소를 삽입하려면 어떻게해야합니까? 답변 referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); referenceNode newNode 를 배치하려는 노드입니다. referenceNode 가 부모 요소 내의 마지막 자식이면 referenceNode.nextSibling 은 null 되고 insertBefore 는 목록 끝에 추가하여 해당 사례를 처리하기 때문입니다. 그래서: function i..

질문 : jQuery document.createElement에 해당합니까? 나는 오래된 JavaScript 코드를 리팩토링하고 있으며 많은 DOM 조작이 진행되고 있습니다. var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t); jQuery를 사용하여 더 나은 방법이 있는지 알고 싶습니다. 나는 다음과 같은 실험을 해왔다. var odv = $.create("div"); $.append(odv); // And m..

질문 : jQuery에서 요소가 숨겨져 있는지 어떻게 확인합니까? .hide() , .show() 또는 .toggle() 함수를 사용하여 요소의 가시성을 전환 할 수 있습니까? visible 되는지 또는 hidden 있는지 어떻게 테스트 하시겠습니까? 답변 질문이 단일 요소를 참조하므로이 코드가 더 적합 할 수 있습니다. // Checks CSS content for display:[none|block], ignores visibility:[true|false] $(element).is(":visible"); // The same works with hidden $(element).is(":hidden"); twernt의 제안 과 동일하지만 단일 요소에 적용됩니다. jQuery FAQ에서 권장하는 알고리..

질문 : HTMLCollection 요소에 대한 For 루프 HTMLCollectionOf 의 모든 요소에 대한 ID 가져 오기를 설정하려고합니다. 다음 코드를 작성했습니다. var list = document.getElementsByClassName("events"); console.log(list[0].id); for (key in list) { console.log(key.id); } 하지만 콘솔에 다음과 같은 출력이 나타납니다. event1 undefined 내가 기대했던 것이 아닙니다. 두 번째 콘솔 출력이 undefined 않았지만 첫 번째 콘솔 출력이 event1 이유는 무엇입니까? 답변 원래 질문에 대한 응답으로 for/in 잘못 사용하고 있습니다. 코드에서 key 는 색인입니다. 따라서 ..

질문 : 내장 DOM 메소드 또는 프로토 타입을 사용하여 HTML 문자열에서 새 DOM 요소 생성 요소를 나타내는 HTML 문자열이 있습니다 : 'text' . DOM의 요소 (제 경우 ul 프로토 타입이나 DOM 메소드로 어떻게 할 수 있습니까? (나는 jQuery에서 쉽게 할 수 있다는 것을 알고 있지만 불행히도 jQuery를 사용하지 않습니다.) 답변 참고 : 대부분의 최신 브라우저는 HTML 요소를 지원하므로 문자열에서 요소를 만드는보다 안정적인 방법을 제공합니다. 자세한 내용은 아래 Mark Amery의 답변을 참조하십시오 . 이전 브라우저 및 node / jsdom 요소를 지원하지 않음)의 경우 다음 방법을 사용하십시오. HTML 문자열에서 DOM 요소를 가져 오기 위해 라이브러리가 사용하는 ..

질문 : 각각 offsetWidth, clientWidth, scrollWidth 및 -Height 이해 offsetWidth / clientWidth / scrollWidth (및 -Height )와 관련하여 StackOverflow에 대한 몇 가지 질문이 있지만 해당 값이 무엇인지에 대한 포괄적 인 설명은 제공하지 않습니다. 또한 웹에는 혼란 스럽거나 잘못된 정보를 제공하는 여러 소스가 있습니다. 시각적 힌트를 포함하여 완전한 설명을 할 수 있습니까? 또한 이러한 값을 사용하여 스크롤 막대 너비를 계산하려면 어떻게해야합니까? 답변 CSS 상자 모델은 특히 스크롤 콘텐츠와 관련하여 다소 복잡합니다. 브라우저는 CSS의 값을 사용하여 상자를 그리는 반면, CSS 만있는 경우 JS를 사용하여 모든 치수를 ..

질문 : HTML에서 속성과 속성의 차이점은 무엇입니까? jQuery 1.6.1에서 변경 한 후 HTML에서 속성과 속성의 차이를 정의하려고했습니다. jQuery 1.6.1 릴리스 노트 (하단 근처)의 목록을 보면 다음과 같이 HTML 속성과 속성을 분류 할 수있는 것 같습니다. 속성 : boolean값이 있거나 selectedIndex와 같이 계산 된 UA 인 모든 항목입니다. 속성 : boolean이 아니거나 UA 생성 값을 포함하지 않는 HTML 요소에 추가 할 수있는 '속성'입니다. 답변 HTML 소스 코드를 작성할 때 HTML 요소에 속성을 정의 할 수 있습니다. 그런 다음 브라우저가 코드를 구문 분석하면 해당 DOM 노드가 생성됩니다. 이 노드는 객체이므로 속성 이 있습니다. 예를 들어이 HT..

질문 : jQuery 또는 getElementById와 같은 DOM 메서드가 요소를 찾지 못하는 이유는 무엇입니까? document.getElementById , $("#id") 또는 기타 DOM 메소드 / jQuery 선택기가 요소를 찾지 못하는 이유는 무엇입니까? 예제 문제는 다음과 같습니다. jQuery가 이벤트 핸들러를 자동으로 바인딩하지 못함 jQuery "getter"메서드 ( .val() , .html() , .text() ) undefined null 반환하는 표준 DOM 메서드로 인해 여러 오류가 발생합니다. 포착되지 않은 TypeError : null의 '...'속성을 설정할 수 없습니다. Uncaught TypeError : null의 '...'속성을 읽을 수 없습니다. 가장 일반적인..

질문 : jQuery를 사용하여 이름으로 요소를 어떻게 선택할 수 있습니까? 확장하고 숨기려는 테이블 열이 있습니다. jQuery는 요소 name class 별로 선택할 때 요소를 숨기는 것 같습니다. 예를 들면 : $(".bold").hide(); // Selecting by class works. $("tcol1").hide(); // Selecting by name does not work. 아래 HTML을 참고하십시오. 두 번째 열은 모든 행에 대해 name name 속성을 사용하여이 컬렉션을 어떻게 만들 수 있습니까? data1 data2 data1 data2 data1 data2 답변 jQuery 속성 선택기를 사용할 수 있습니다. $('td[name="tcol1"]') // Matches e..