JavaScript에서 요소를 가져오는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 요소를 가져오는 방법은 무엇입니까?

醉折花枝作酒筹

풀어 주다： 2023-01-07 11:43:48

원래의

18732명이 탐색했습니다.

JavaScript에서 요소를 가져오는 방법은 다음과 같습니다. 1. ID를 기반으로 요소 가져오기 2. 태그 이름을 기반으로 요소 가져오기 3. 이름 속성 값을 기반으로 요소 가져오기 5. 선택기를 기반으로 요소를 가져옵니다. 요소를 가져옵니다.

JavaScript에서 요소를 가져오는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

1. id

document.getElementById("id 속성 값");

2. 태그 이름을 기반으로 요소 가져오기

document.getElementsByTagName("태그 이름");

3. 이름에 따라

document.getElementsByName("name 속성의 값") 속성 값으로 요소를 가져옵니다.

4 클래스 이름을 기반으로 요소를 가져옵니다. style

document.getElementsByClassName(" 클래스 스타일 이름");

5.선택 항목에 따라 요소 가져오기

1.document.querySelector("selector");

2.document.querySelectorAll("selector");

1. id

document.getElementById("ID 속성의 값");

반환 값은 요소 객체입니다

사례: 팝업 버튼을 클릭하세요

    <body>
    <input type="button" value="弹框" id="btn">    
    <script>
        //根据id属性的值从文档中获取这个元素        
        var btnobj = document.getElementById("btn");       //为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)        
        btnobj.onclick = function () {            //响应做的事情            
        alert("码仙");        
        };
    </script>
    </body>

로그인 후 복사

2. 태그 이름

document.getElementsByTagName("태그 이름");

반환 값은 의사 배열입니다.

사례: 여러 p 태그의 텍스트 내용을 변경하려면 버튼을 클릭하세요

    <body>
    <input type="button" value="改变" id="btn">
    <p id="dv">
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
        <p>哈哈,我又变帅了</p>
    </p>
    <script>
        //根据id获取按钮,注册点击事件,添加事件处理函数
        document.getElementById("btn").onclick = function () {
            //根据标签名字获取标签
            var pObjs = document.getElementsByTagName("p");
            //var pObjs=document.getElementById("dv1").getElementsByTagName("p");
            //循环遍历这个数组
            for (var i = 0; i < pObjs.length; i++) {
                //每个p标签,设置文字
                pObjs[i].innerText = "我们都是p";
            }
        };
    </script>
    </body>

로그인 후 복사

3. 이름 속성 값을 기준으로

document.getElementsByName("value of the name attribute");

반환 값은 의사 배열입니다

사례:Case: 버튼을 클릭하면 모든 텍스트의 값 속성 값이 변경됩니다. name 속성 값이 name1

<body>
    <input type="button" value="显示效果" id="btn"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name2"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name3"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <input type="text" value="您好" name="name1"/><br/>
    <script>
        //点击按钮,改变所有name属性值为name1的文本框中的value属性值
        document.getElementById("btn").onclick = function () {
            //通过name属性值获取元素-------表单的标签
            var inputs = document.getElementsByName("name1");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "我很好";
            }
        };
    </script>
    </body>

로그인 후 복사

4인 상자. 클래스 스타일 이름을 기반으로 요소를 가져옵니다.

document.getElementsByClassName("name of the class style");

반환 값은 의사 배열입니다

Case : 모든 텍스트 상자의 값을 수정합니다

<body>
    <input type="button" value="修改文本框的值" id="btn"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/>
    <script>
        //根据id获取按钮,为按钮注册点击事件,添加事件处理函数
        document.getElementById("btn").onclick = function () {
            //获取所有的文本框
            //根据类样式的名字获取元素
            var inputs = document.getElementsByClassName("text");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "码仙";
            }
        };
    </script>
    </body>

로그인 후 복사

5. 선택기 기준으로 요소 가져오기
1.document.querySelector("selector");

반환 값은 요소 개체입니다

사례: 버튼 클릭 -up

<body>
    <input type="button" value="显示效果1" id="btn"/>
    <input type="button" value="显示效果2" class="btn"/>
    <script>
        //点击按钮弹出对话框
        //根据选择器的方式获取元素
        var btnObj1 = document.querySelector("#btn");
        btnObj1.onclick = function () {
            alert("我变帅了");
        };
        var btnObj2 = document.querySelector(".btn");
        btnObj2.onclick = function () {
            alert("哈哈,我又变帅了");
        };
    </script>
    </body>

로그인 후 복사

2.document.querySelectorAll("selector");

반환 값은 의사 배열입니다

사례: 모든 텍스트 상자의 값 수정

<body>
    <input type="button" value="修改文本框的值" id="btn"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/><br/>
    <input type="text" value="" class="text"/>
    <script>
        document.getElementById("btn").onclick = function () {
            //根据选择器的方式获取元素
            var inputs = document.querySelectorAll(".text");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value = "码仙";
            }
        };
    </script>
    </body>

로그인 후 복사

[추천 학습: javascript 고급 튜토리얼 】

위 내용은 JavaScript에서 요소를 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!