자바스크립트의 DOM 양식 작업(코드 포함)-JS 튜토리얼-php.cn

자바스크립트의 DOM 양식 작업(코드 포함)

不言

풀어 주다： 2018-09-04 10:00:26

원래의

1633명이 탐색했습니다.

DOM에서는 어떤 종류의 작업을 수행할 수 있으며, 작업 방법은 무엇인가요? 이 기사에서는 JavaScript의 DOM 양식 작업을 공유합니다. 내용이 매우 자세하므로 살펴보겠습니다.

1. 양식 가져오기

양식 요소 가져오기

현재 HTML 페이지의 모든 양식 컬렉션을 가져오려면 Document 객체의 양식 속성을 사용하세요.
양식의 name 속성 값을 사용하세요. 테이블 요소 요소를 가져오는 Document 개체

<body>
<form action="#">
    <input type="submit">
</form>
<form name="mylove" action="#">
    <input type="submit">
</form>
<script>
    console.log(document.forms);
//    获取当前HTML页面所有表单元素
    console.log(document.mylove);
//    document表单名称-有些新浏览器是不支持
</script>
</body>

로그인 후 복사

양식 구성 요소 요소 가져오기

HTMLFormElement 개체의 elements 속성을 사용하여 양식 구성 요소 컬렉션 가져오기

<body>
<form action="#">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    console.log(form.elements);
</script>
</body>

로그인 후 복사

2. 양식 작업

텍스트 내용 선택

HTMLElement 개체 및 HTMLTextAreaElement 개체 select() 메서드를 사용하여 텍스트 상자에 있는 모든 텍스트 상자의 내용을 가져옵니다.

<body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <!---->
    <input type="submit">
    <!--定义提交按钮-->
</form>
<script>
    var username = document.getElementById(username);
//    获取ID属性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

로그인 후 복사

텍스트 내용 설정

setSelectionRange() 메서드가 새로 추가되었습니다. 집중된 텍스트 상자의 텍스트 콘텐츠를 가져오는 HTML5

body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <!---->
    <input type="submit">
    <!--定义提交按钮-->
</form>
<script>
    var username = document.getElementById(username);
//    获取ID属性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

로그인 후 복사

클립보드 작동

복사, 잘라내기, 붙여넣기를 사용하여 클립보드의 복사, 잘라내기, 붙여넣기 작업 설정

<body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <input type="text" id="username1">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('copy',function (event) {
        var data = event.clipboardData || window.clipboardData;
        console.log(data);
        console.log('这是复制操作');
        var value = username.value;
        var result = value.substring(selectionStart,username.selectionEnd);
        console.log(result);
        data.setData('text',result);
    });
    username.addEventListener('cut',function () {
        console.log('这是个剪切操作');
    });
    var username1 = document.getElementById('username1');
    username1.addEventListener('paste',function (event) {
        event.preventDefault();
        var data = event.clipboardData || window.clipboardData;
        var result = data.getData('text');
        /*得到DataTransfer对象
        * geData()方法-获取数据内容*/

        if (result === '用户名') {
            result ='***';
        }
        username1.value = result;
    })
</script>
</body>

로그인 후 복사

드롭다운 작업 list

는 select 및 option 개체로 생성되며 몇 가지 속성과 메서드를 제공합니다. 그렇지 않은 경우 false를 반환합니다. setCustomValidity(message)를 사용하면 요소에 대한 오류 메시지가 사용자 정의됩니다. 설정된 경우 요소는 유효하지 않으며

<form action="#">
    <select id="yx">
        <option id="dj" value="dj">单机</option>
        <option value="wy">网页</option>
        <option value="dy">端游</option>
    </select>
    <select id="cyx1" multiple size="5">
        <option value="dj">单机</option>
        <option value="wy">网页</option>
        <option value="dy">端游</option>
    </select>
</form>
<script>

    var yx = document.getElementById('yx');
    // HTMLSelectElement对象
    console.log(yx.length);
    console.log(yx.options);
    console.log(yx.selectedIndex);// 被选中<option>的索引值
    // 属性
    var yx1 = document.getElementById('yx1');
    // size属性默认值是 0
    console.log(yx1.size);

    console.log(yx1.item(1));
    yx1.remove(2);

    var dj = document.getElementById('dj');
    console.log(dj.index);
    console.log(dj.selected);
    console.log(dj.text);
    console.log(dj.value);

</script>

로그인 후 복사

4 양식 제출이 표시됩니다. 이벤트

submit을 사용하여 양식 제출

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('blur',function () {
        var value = username.value;
        if (value === '' || value === undefined || vaiue === null) {
            console.log('请输入你用户名');
        }
    });
</script>
</body>

로그인 후 복사

submit() 메서드

submit을 사용하여 양식 제출 및 모든 제출 사용 일반 버튼으로 완료 가능

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function (event) {
        console.log('该表单已被提交');
    });
</script>
</body>

로그인 후 복사