1.DOM操作元素的节点

这里我们主要关注间接查找节点与删除节点

1.间接查找节点

不但有直接通过getElementById('id')等方法直接获取节点,而且可以通过已经获取的节点间接的获取到节点.

主要方法如下:

方法\|属性	描述
parentNode	返回元素的父节点
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
previousSibling	返回元素的上一个兄弟节点

2.删除节点

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

想要调用这个方法需要获取到想要删除节点的父节点.

示例1:

    	<body>
    		<span id="programmer">程序猿</span>
    		<a href="javascript:void(0)" onclick="delNode();">删除</a>
    	</body>
    	<script type="text/javascript">
    		function delNode() {
    			// 得到需要被删除的元素对象
    			var span = document.getElementById("programmer");
    			// 得到被删除元素的父节点
    			var parent = span.parentElement;
    			// 删除元素
    			parent.removeChild(span);
    		}
    	</script>

2.JS表单

我们通过js来操作表单,获取表单,并且获取表单中的元素,选择表单的提交方式等. 下面我们来看一下对表单的操作.

1.获取表单

获取表单的方法:

document.表单名称
document.form[表单名称]
document.form[索引]//索引下标从0开始
getElementById()
getElementByName()
getElementByClass()
getElementByTagName()

2.获取表单元素

表单元素有:

-	-
text	文本框
password	密码框
hidden	隐藏域
textarea	文本域
radio	单选框
checkbox	复选框
select	下拉框

获取表单元素的值就是获取表单元素的value值,以及单选框,复选框的checked,下拉框的selected

2.获取input元素的value

获取方式
- getElementById().value
- getElementByName().value
- getElementByClass().value
- getElementByTagName().value
- 通过form.名称形式获取---例:document.getElementById("myform").upwd.value;

3.获取单选和多选

获取单选和多选按钮---前提:将一组按钮设置相同的name属性
获取方式:
- 1. 先通过document.getElementsByName("name属性值")获取按钮组
- 1. 遍历每个按钮,并查询按钮元素的checked属性-->属性值为true表示被选中,否则未被选中.

4.获取下拉框

获取步骤:

获取select对象

var selectid = document.getElementById("selectid")
获取选中项的索引

var idx=selectid.selectedIndex
获取选中项options的value属性值

var val = selectid.options[idx].value

注意:当通过options获取选中项的value属性值时

1). 若没有value属性，则取option标签的内容

2). 若存在value属性，则取value属性的值

获取选中项options的text

var txt = selectid.options[idx].text

3.提交表单

提交表单的方式有多种,这里主要说两种:

方式一

通过一个普通按钮,设置点击事件onclick="submit1();",在方法中判断内容,然后手动提交表单document.getElementById("formid").submit();
方式二

<input type="submit" onclick="return submit2();" value="提交" />

方法submit2()返回true/false,当返回true或没有返回时提交,返回false时不提交

示例2:

        <body>
        <form id='myform1' name="myform2" action="" method="get">
            姓名：<input  name="test"  id="uname"/><span id="msg" style="color: red;font-size: 12px;" ></span><br />
            <!--通过js事件：sub()提交表单-->
            <input type="button" onclick="submit1();" value="提交" />
        
        </form>
        <hr />
        <form id='myform2'  action="" method="get">
            姓名：<input  name="test"  id="uname2"/><span id="msg2" style="color: red;font-size: 12px;" ></span><br />
            <!--通过js事件：sub()提交表单-->
            <input type="submit" onclick="return submit2();" value="提交" />
        </form>
        <hr />
        </body>
        <script type="text/javascript">
            function submit1() {
                // 获取表单元素的值（文本框）
                var uname = document.getElementById("uname").value;
                // 判断文本框的值是否为空 （当条件不满足时，就需要return,终止代码往下进行）
                if (uname == null || uname.trim() == "") {
                    document.getElementById("msg").innerHTML = "用户姓名不能为空！";
                    return;
                }
                // 手动提交表单
                document.getElementById("myform1").submit();
            }
            function submit2() {
                // 获取表单元素的值（文本框）
                var uname = document.getElementById("uname2").value;
                // 判断文本框的值是否为空 （当条件不满足时，就需要return,终止代码往下进行）
                if (uname == null || uname.trim() == "") {
                    document.getElementById("msg2").innerHTML = "用户姓名不能为空！";
                    return false;
                }
                return true;
            }
        </script>

浅谈DOM操作元素的节点&JS表单