DOM和表单操作

DOM:
创建节点和插入节点
创建节点
方法 描述
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode() 创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了

插入节点
方法 描述
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点

3. 间接查找节点
   方法|属性 描述
   childNodes () 返回元素的一个子节点的数组
   firstChild() 返回元素的第一个子节点
   lastChild() 返回元素的最后一个子节点
   nextSibling 返回元素的下一个兄弟节点
   parentNode 返回元素的父节点
   previousSibling 返回元素的上一个兄弟节点

4. 替换节点
   方法|属性 描述
   replaceChild(newNode,oldNode) 用新的节点替换旧的节点

5. 克隆节点
   方法|属性 描述
   cloneNode() 复制节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容 false(默认值)：只克隆结构

6. 删除节点
   方法|属性 描述
   removeChild() 从元素中移除子节点

属性操作
方法|属性 描述
getAttribute() 返回指定元素的属性值
getAttributeNode() 返回指定属性节点
element.id 设置或者返回元素的
id setAttribute() 设置或者改变指定属性并指定值
setAttributeNode() 设置或者改变指定属性节点
element.style 设置或返回元素的样式属性
element.className 设置或返回元素的 class 属性
element.classList 返回元素的类名

获取表单
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始

获取元素

1. 获取 input 的元素
   如 text password hidden textarea 等，
   1)、通过 id 获取：document.getElementById(元素 id);
   2)、通过 form.名称形式获取: myform.元素名称;  name 属性值
   3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
   4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] //从 0 开始

获取 单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1)获取单选按钮组： document.getElementsByName(“name 属性值”);
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定： 没有 checked 属性 或 checked=’false’

获取下拉选项
（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 属性

提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码: 获取表单.submit();

（2）使用 submit 按钮 + οnclick=“return 函数()” +函数编写代码: 最后必须返回：return true|false;

（3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit=“return 函数();” +函数编写代码: 最后必须返回：return true|false;