まず、概念
1は、DOM
DOM：ドキュメントオブジェクトモデルドキュメントオブジェクトモデル
のページの動的な対話のためには、BOMの操作は、十分ではありませんHTMLはコアで動作する必要があります。どのようにHTM、DOMです。簡単に言えば、DOMは、動的制御プログラムのHTMLインターフェイスを提供します。DOMドキュメントオブジェクトモデルは、追加、削除、およびページの特定の部分を変更するために、開発者が実行したノードの階層ツリーを、描いています。ジャバスクリプトのコアでDOM。
ブラウザのHTMLドキュメントにロードされたそれぞれのDocumentオブジェクトとなります。Documentオブジェクト我々は、スクリプトからHTMLページ内のすべての要素にアクセスできるようにします。ドキュメントオブジェクトは、Windowオブジェクトの一部であり、window.documentプロパティによってアクセスすることができます。
2、ノードは、
HTMLページをロードするときに、Webブラウザがページの内部構造を表したツリー構造を生成します。ノードは、ノードがツリーを形成するようなDOMツリーが理解されます。ページの要素のためのノードの次のタイプに解析されてもよいです。
节点类型 HTML内容 例如
文档节点 文档本身 整个文档document
元素节点 所有的HTML元素 a、div、p
属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释 <!-- -->
clipboard1.png
第二に、操作要素ノード
内のすべてのノードが1つのオブジェクトとして見ることができた後、HTML文書をDOMツリーに解析されたときに、私たちはDOMオブジェクトとなり、これらのオブジェクトのために、我々はすべての種類を作ることができます操作は、あなたが特定の位置にノードオブジェクトを追加し、あるいはノードが動的にオブジェクトをすることができ、削除することができ、あなたはノードオブジェクトのいくつかの種類を作成することができ、特定のクラスまたはノードオブジェクトを見つけるために、これらの操作は、ページが動的な効果を見えるようにすることができます、遅延バインディングイベントを使用し、我々は、私達のページを一度に特に具体的な変換を実行するために、特定のイベントを行うことができます。
- ノードを取得します
パフォーマンスは、変更操作を、追加、削除、あなたは、その後、我々はノード言う、つまり（オブジェクトを探し、見つける、Documentオブジェクトの方法を提供することができる場所を指定、またはターゲットを見つける必要があります）。
注：オペレータが実行するために初期化されたDOMノードを待たなければなりません。二つの方法で取り扱わ：
（1）スクリプトは、ラベルはHTMLの最後に移動することができます呼び出します。
（2）JSを処理するためにonloadイベントを使用して、JSでのonloadイベントをロードする前にロードされたHTMLを待ちます。
方法 描述
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name属性值获取 dom 对象数组，常用于多选获取值
- ノードと、インサート・ノードを作成すると、
*ノードを作成します。
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容 innerHTML
也能达到创建节点的效果，直接添加到指定位置了
* 插入节点
方法 描述
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点 需要参考父节点
/**
* 替换元素
*/
function replaceNode() {
// oldNode.parentNode.replaceChild(newNode,oldNode)
// 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
var cxy = document.getElementById("test");
// 创建新节点
var span = document.createElement("span");
span.innerHTML = "攻城狮";
cxy.parentNode.replaceChild(span,cxy);
}
/**
* cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
*/
function cloneValue() {
// 得到被克隆的对象
var cloneValue = document.getElementById("music");
var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
console.log(newValue);
var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
console.log(deepValue);
// 将克隆好的结果追加到div中
document.getElementById("mydiv").appendChild(deepValue);
}
- 間接検索ノード
方法|属性 描述
childNodes () 返回元素的一个子节点的数组
firstChild() 返回元素的第一个子节点
lastChild() 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
// 得到div对象
var div1 = document.getElementById("div1");
// childNodes () 返回元素的一个子节点的数组
console.log(div1.childNodes);
// firstChild() 返回元素的第一个子节点
console.log(div1.firstChild);
// lastChild() 返回元素的最后一个子节点
console.log(div1.lastChild);
// parentNode 返回元素的父节点
console.log(div1.parentNode);
// nextSibling 返回元素的下一个兄弟节点
console.log(div1.nextElementSibling); // 下一个元素节点（元素）
console.log(div1.nextSibling); // 下一个节点（包含文本节点）
// previousSibling 返回元素的上一个兄弟节点
console.log(div1.previousElementSibling); // 上一个元素节点（元素）
console.log(div1.previousSibling); // 上一个节点（包含文本节点）
- 交換用ノード
方法|属性 描述
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点，然后用新的节点替换旧节点
- クローニングノード
方法|属性 描述
cloneNode() 复制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
- ノードの削除
方法|プロパティ記述
要素ノードから子を削除するのremoveChild（）を
第三に、フォームアクションは
フォームの一種前に、我々は戻って、データ送信時のページデータ送信は非常に一般的な方法（要求が行われている）には、我々はページ今すべき、一連のデータの正当性を検証し、不要なデータ伝送エラーを保存し、ユーザーエクスペリエンスを向上させます。
1、フォームを得るために
document.表单名称
document.getElementById(表单 id);
document.forms[表单名称]
document.forms[索引]; //从 0 开始
<body>
<form id='myform' name="myform" action="" method="post">
</form>
<form id='myform2' name="myform2" action="" method="post">
</form>
</body>
<script>
//四种方式 var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>
要素を取得するために2、
入力要素を取得します*
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name 属性值
3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/>
<br />
密码:<input type="password" id="upwd" name="upwd" value="123456" />
<br /> <input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >
获取元素内容</button>
</form>
</body>
<script>
function getTxt(){
var uno =document.getElementById("uno");
var uname =myform.uname;
console.log(uname+"--------");
var upwd =document.getElementsByTagName('input')[1] ;
var intro =document.getElementsByName("intro")[0];
alert(uno.value+"-->"+uname.value +"-->"+upwd.value+"->"+intro.value);
}
</script>
* 获取 单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组： document.getElementsByName("name 属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性 若
属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad')
//radios[0].checked = 'checked'
for(var i=0; i<radios.length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}
</script>
* 获取 多选按钮
操作方式与单选同理，不同之处在于可以多选
var ufav=document.getElementsByName("ufav"); var favstr="";
for (i=0;i<ufav.length;i++){
if(ufav[i].checked){
favstr+=ufav[i].value+",";
}
}
favstr =favstr.substr(0,favstr.length-1);
* 获取下拉选项
（1）获取 select 对象： var ufrom = document.getElementById("ufrom");
（2）获取选中项的索引： var idx=ufrom.selectedIndex ;
（3）获取选中项 options 的 value 属性值：
var val = ufrom.options[idx].value;
注意：当通过 options 获取选中项的 value 属性值时，
若没有 value 属性，则取 option 标签的内容
若存在 value 属性，则取 value 属性的值
（4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text;
选中状态设定：selected='selected'、selected=true、selected
未选中状态设定：不设 selected 属性
<body>
来自:
<select id="ufrom" name="ufrom" >
<option value="-1" >请选择</option>
<option selected="selected">北京</option>
<option value="1" >上海</option>
</select><br />
</body>
<script type="text/javascript">
// （1）获取 select 对象
var sel = document.getElementById("ufrom");
// （2）获取选中项的索引
var selectIndex = sel.selectedIndex;
console.log("当前选中项的索引：" + selectIndex);
// （3）获取选中项 options 的 value 属性值
var value1 = sel.value;
var value2 = sel.options[selectIndex].value;
console.log("当前选中项的值：" + value1 + "," + value2);
// （4）获取选中项 options 的 text
var text1 = sel.options[selectIndex].innerHTML;
var text2 = sel.options[selectIndex].text;
console.log("当前选中项的文本：" + text1 + "," + text2);
</script>
3、フォームが送信されます
注：提交表单时，表单元素必须设置name属性值
提交类型：
get请求
参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，
不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
post请求 （需要服务器的支持）
参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，
与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
通常做查询操作，使用GET请求；增删改使用POST请求。
提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码:
获取表单.submit();
（2）使用 submit 按钮 + onclick="return 函数()" +函数编写代码:
最后必须返回：return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 onsubmit="return 函数();" +函数编写代码:
最后必须返回：return true|false;
<form action="01-获取表单.html" method="get">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" onclick="return checkForm1()"/>
</form>
<form action="01-获取表单.html" method="get" onsubmit="return checkForm2()">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" />
</form>
<form action="01-获取表单.html" method="get" >
姓名：<input type="text" name="uname1" />
<input type="button" value="提交" onclick="checkForm3()" />
<span id="msg" style="font-size: 12px;color: red;"></span>
</form>
<script type="text/javascript">
/*提交方式一：submit按钮 + onclick事件*/
// 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
//如果return true，则提交表单；return false不提交；若直接return也会提交表单
function checkForm1() {
//return true; // 提交表单
return false; // 不提交表单
//return; // 无效，不会阻止表单提交
}
/*提交方式二：submit按钮 + onsubmit事件*/
// 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
//如果return true，则提交表单；return false不提交；若直接return也会提交表单
function checkForm2() {
return true; // 提交表单
//return false; // 不提交表单
//return; // 无效，不会阻止表单提交
}
/*提交方式三：button按钮+点击事件*/
// 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
function checkForm3() {
var uname = document.getElementsByName("uname1")[0].value;
if ( uname == null || uname.trim() == "") {
console.log("用户名不能为空！");
document.getElementById("msg").innerHTML = "用户名不能为空！";
return;
}
// 手动提交表单
document.forms[2].submit();
}
</script>
ます。https：//www.jianshu.com/p/eae50f3a5a74で再現