关于DOM编程

开发

关于JavaScript-DOM编程的一些基础知识要点

DOM(Document Object Model) 文档对象模型

DOM编程通过标签属性获取节点的方法

  1. document.getElementById(“HTML标签元素的ID”);
  2. document.getElementsByTagName(“HTML标签元素名”); (返回值是数组)
  3. document.getElementsByName(“HTML标签元素的name”); (返回值是数组)

DOM编程通过关系获取标签节点的方法

  1. nodeType 获取当前节点的类型

    1. 文本节点类型是：3
    2. 注释节点类型是：8
    3. 标签节点类型是：1

  2. parentNode 获取当前元素的父节点

    1
    2
    3
    var bodyNode = document.getElementsByTagName("body")[0];
    var parentNode = bodyNode.parentNode;(获取得该元素的父节点对象)
    var parentNodeName = parentNode.nodeName;(获取到该父节点名称)

  3. childNodes 获取当前元素的所有下一级子元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var bodyNode = document.getElementsByTagName("body")[0];
    var childNodes = bodyNode.childNodes;(获取得该元素的下一级子元素对象的数组)
    var childNodesName = parentNode[0].nodeName;(获取到该子节点0指针的名称) 
    //如果有Script标签并且不在body标签体内的情况，浏览器会自动修正把script标签放进body中。且句尾后具有空文本，也算一个节点。注释也算一个节点。如果需要纯标签节点可以使用nodeType来判断类型进行for循环筛选
    for(var i = 0 ; i < childNodes.length ; i++){
      if(childNodes[i].nodeType == 1){
        alert(childNodes[i].nodeName);
      }
    }

  4. firstChild 获取当前节点的第一个子节点

    1
    2
    3
    var bodyNode = document.getElementsByTagName("body")[0];
    var firstChild = bodyNode.firstChild;(获取当前节点的第一个子节点对象)
    var firstChildName = firstChild.nodeName;(获取到第一个子节点名称)

  5. lastChild 获取当前节点的最后一个子节点

    1
    2
    3
    var bodyNode = document.getElementsByTagName("body")[0];
    var lastChild  = bodyNode.lastChild;(获取当前节点的最后一个子节点对象)
    var lastChildName = lastChild.nodeName;(获取到最后一个子节点名称)

  6. previousSibling 获取当前节点的上一个节点（兄节点）

  7. nextSibling 获取当前节点的下一个节点（弟节点）

DOM编程 创建节点，插入节点

  1. document.createElement(“标签名”); 创建标签对象

    1
    2
    3
    4
    var tableNode = document.getElementsByTagName("table")[0];
    var trNode = document.createElement("tr");
    var tdNode1 = document.createElement("td");
    var tdNode2 = document.createElement("td");

  2. Object.setAttribute(“属性名”,”属性值”); 设置标签属性

    1
    trNode.setAttribute("id","trNode");

  3. Object.innerHTML=””;

    1
    2
    tdNode1.innerHTML = "<input type='file'/>";
    tdNode2.innerHTML = "<a href="#">delete</a>;

  4. Object.appendChild(e); 添加元素对象到Object中子元素最后的位置

    1
    2
    trNode.appendChild(tdNode1);
    trNode.appendChild(tdNode2);

  5. Object.insertBefore(newE,e); 添加元素对象到Object中指定子元素对象前一个位置

    1
    tableNode.insertBefore(trNode,e);

  6. Object.removeChild(e); 删除指定的子节点

    1
    tableNode.removeChild(e);

  7. 添加创建的标签到文档内

    1
    2
    3
    tableNode.appendChild(trNode);
    var bodyNode = document.getElementsByTagName("body");
    bodyNode.appendChild(tableNode);

####例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table>
		<tr>
			<td><input type="file" name="file"></td>
		</tr>
		<tr id="lastRow">
			<td><input type="button" name="buttoon" onclick="addFile()" value="添加"></td>
		</tr>
	</table>
	<script type="text/javascript">
		function addFile(){
			//var tableNode = document.getElementsByTagName("table")[0];
			var tbodyNode = document.getElementsByTagName("tbody")[0];
			var trNode = document.createElement("tr");
			var tdNode1 = document.createElement("td");
			var tdNode2 = document.createElement("td");
			tdNode1.innerHTML = "<input type='file'/>";
			tdNode2.innerHTML = "<a href='#' onclick='delFile(this)'>delete</a>";
			trNode.appendChild(tdNode1);
			trNode.appendChild(tdNode2);
			//tableNode.insertBefore(trNode,tableNode.firstChild); 在第一个添加
			tbodyNode.insertBefore(trNode,document.getElementById("lastRow"));
		}
		function delFile(aNode){
			var trNode = aNode.parentNode.parentNode;
			var tbodyNode = document.getElementsByTagName("tbody")[0];
			tbodyNode.removeChild(trNode);
		}
	</script>
</body>
</html>

利用DOM编程制作联动框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	省份
    	<select id="province" onchange="showCity()">
    		<option>选择</option>
			<option>广东</option>
			<option>湖南</option>
			<option>广西</option>
    	</select>
    	城市
    	<select id="city">
    		<option>选择</option>
    	</select>
    	<script type="text/javascript">
    		function showCity(){
    			var citys = [[],["广州","佛山","深圳","东莞"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];
    			var proviceNode = document.getElementById("province");
    			var selectIndex = province.selectedIndex;
    			var cityDatas = citys[selectIndex];
    			cityNode = document.getElementById("city");
    			cityNodes = cityNode.childNodes;
    			/*
    			for (var i = 0; i < cityNodes.length;) {
    				cityNode.removeChild(cityNodes[i]);
    			}
    			
    			while(cityNodes[0] != null){
    				cityNode.removeChild(cityNodes[0]);
    			}
    			*/
    			cityNode.options.length = 1;
    			for (var i = 0; i < cityDatas.length; i++) {
    				var option = document.createElement("option");
    				option.innerHTML = cityDatas[i];
    				cityNode.appendChild(option);
    			}
    		}
    	</script>
    </body>
</html>

注意事项：当选择了一元数组的时候（广东），不会出现问题，正常循环添加option标签到城市的select标签中。而当再次选择一元数组的时候会导致原先option的数据留存，而重复显示了广东相关的城市，所以需要在添加一个方法来清空城市select标签。而在清空过程，每removeChild一个元素，则下标会往前移，从而导致用for循环删除的时候没清空干净。此时可以去掉for循环的i++，使该循环只删除0下标，直到没有内容，或者使用whlie循环判断该数组是否为空，不为空则就执行一次remoceChild。或者还有一个更为简便的方法，使用option标签方法中获取到options数组，再对该数组赋值长度为0，从而清空。

时间联动框例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	年<select id="year" onchange="showMonth()"><option>选择</option></select>
    	月<select id="month" onchange="showDay()"><option>选择</option></select>
    	日<select id="day"><option>选择</option></select>
    	<script type="text/javascript">
	    	var date  = new Date().getFullYear();
	    	var years = [0,2017,2016,2015,2014,2013,2012,2011,2010,2009,2008,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985,1984,1983,1982,1981,1980,1979,1978,1977,1976,1975,1974,1973,1972,1971,1970,1969,1968,1967,1966,1965,1964,1963,1962,1961,1960,1959,1958,1957,1956,1955,1954,1953,1952,1951,1950,1949,1948,1947,1946,1945,1944,1943,1942,1941,1940,1939,1938,1937,1936,1935,1934,1933,1932,1931,1930,1929,1928,1927,1926,1925,1924,1923,1922,1921,1920,1919,1918,1917,1916,1915,1914,1913,1912,1911,1910,1909,1908,1907,1906,1905,1904,1903,1902,1901,1900];
	    	var rmonths = [0,31,29,31,30,31,30,31,31,30,31,30,31];
	    	var nrmonths = [0,31,28,31,30,31,30,31,31,30,31,30,31];
	    	var months = [0,1,2,3,4,5,6,7,8,9,10,11,12];
	    	var days = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
	    	var yearsNode = document.getElementById("year");
	    	var monthsNode = document.getElementById("month");
	    	var daysNode = document.getElementById("day");
	    	
	    	
	    	//year import
	    	for (var i = 1; i < years.length; i++) {
	    		var optionNode = document.createElement("option");
	    		optionNode.innerHTML=years[i];
	    		yearsNode.appendChild(optionNode);
	    	}
	    	//month import
	    	function showMonth(){
	    		monthsNode.options.length = 1;
	    		for (var i = 1; i < months.length; i++) {
		    		var optionNode = document.createElement("option");
		    		optionNode.innerHTML = months[i];
		    		monthsNode.appendChild(optionNode);
	    		}
	    	}
	    	//day import
	    	function showDay(){
	    		daysNode.options.length = 1;
	    		var r;
	    		if(yearsNode.value%4 == 0){
	    			r = rmonths[monthsNode.value];
	    		}else{
	    			r = nrmonths[monthsNode.value];
	    		}
	    		for (var i = 1; i <= r; i++) {
	    			var optionNode = document.createElement("option");
	    			optionNode.innerHTML = days[i];
	    			daysNode.appendChild(optionNode);
	    		}
	    	}
			
	    	
    	</script>
    </body>
</html>

本文标题:关于DOM编程

文章作者:Bitamin Kim

发布时间:2017年01月07日 - 17时55分

最后更新:2017年01月25日 - 02时01分

原始链接:http://bitamin.pw/2017/01/07/关于DOM编程/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. DOM(Document Object Model) 文档对象模型
    1. 1.0.1. DOM编程通过标签属性获取节点的方法
    2. 1.0.2. DOM编程通过关系获取标签节点的方法
    3. 1.0.3. DOM编程 创建节点，插入节点
    4. 1.0.4. 利用DOM编程制作联动框
    5. 1.0.5. 时间联动框例子
,