JavaScript での DOM フォーム操作 (コード付き)

DOM上のフォームに対してどのような操作が可能で、どのような操作方法があるのでしょうか？この記事では JavaScript での DOM フォーム操作について説明します。内容は非常に詳しいので見てみましょう。

1. フォームを取得します

フォーム要素を取得します

現在の HTML ページのすべてのフォーム コレクションを取得するには、Document オブジェクトの form 属性を使用します
のフォームの name 属性値を使用しますDocument オブジェクトを使用してテーブル要素要素を取得します

    

    

<script> console.log(document.forms); // 获取当前HTML页面所有表单元素 console.log(document.mylove); // document表单名称-有些新浏览器是不支持 </script>

フォームコンポーネント要素を取得します

HTMLFormElement オブジェクトの elements 属性を使用してフォームコンポーネントのコレクションを取得します

         

<script> var form = document.forms[0]; console.log(form.elements); </script>

2. フォーム操作

テキスト内容の選択

HTMLElementオブジェクトとHTMLTextAreaElementオブジェクトのselect()メソッドを使用して、テキストボックス内のすべてのテキストボックスの内容を取得します

                   

<script> var username = document.getElementById(username); // 获取ID属性 username.addEventListener(&#39;focus&#39;,function(){ username.select(); }) username.addEventListener(&#39;select&#39;,function () { console.log(username.selectionStart.username.selectionEnd); var value = username.getAttribute(&#39;value&#39;); var result = value.substring(username.selectionStart,username.selectionEnd); console.log(result); }) </script>

テキスト内容を設定します

setSelectionRange()メソッドが新たに追加されましたHTML5 でフォーカスされたテキスト ボックスのテキスト コンテンツを取得します

body>

                   

<script> var username = document.getElementById(username); // 获取ID属性 username.addEventListener(&#39;focus&#39;,function(){ username.select(); }) username.addEventListener(&#39;select&#39;,function () { console.log(username.selectionStart.username.selectionEnd); var value = username.getAttribute(&#39;value&#39;); var result = value.substring(username.selectionStart,username.selectionEnd); console.log(result); }) </script>

以上がJavaScript での DOM フォーム操作 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。