JS操作DOM元素代码的编写

最新推荐文章于 2022-04-12 18:06:43 发布

wespten

最新推荐文章于 2022-04-12 18:06:43 发布

阅读量834

点赞数

分类专栏：全栈前端开发文章标签： JS操作DOM元素代码的编写

本文链接：https://blog.csdn.net/qq_35029061/article/details/83546397

版权

全栈前端开发专栏收录该内容

61 篇文章 3 订阅

订阅专栏

JS操作DOM元素代码的编写

DOM树

传统的html文档顺序是:document->html->(head,body)

根据 DOM，HTML 文档中的每个成分都是一个节点。
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

一、document对象(DOM核心对象)
1、dom属性
title 返回或设置当前文档的标题
URL 返回当前文档的url
bgColor 设置文档的背景色
fgColor 设置文档的前景色(设置文字颜色)

   alert(document.title)
   document.title="HelloWorld";
   alert(document.URL)
   alert(location.href)
   document.bgColor="red";
   document.fgColor="blue";

2.dom获取节点方法
getElementById(idname) 返回拥有指定id的（第一个）对象的引用

getElementsByTagName(tagname) 返回带有指定标签名的对象的集合

getElementsByName(name) 返回带有指定name指定名称的对象的集合，主要是适用于表单

write()

缺点 1.浪费内存 2.逻辑性不强。一般通过节点之间的关系属性获取节点

<Script>
 window.onload=function  () {
    //方法 getElementById(idname)
    var div1=document.getElementById("one");
	alert(div1.innerHTML)

    //getElementsByTagName(tagname)
  var divs=document.getElementsByTagName("div");
  var lengths=divs.length;
  //alert(lengths)
  //通过下标来访问
    //alert(divs[1].innerHTML)
	for (var i=0; i<lengths; i++) {
	alert(divs[i].innerHTML)
	}

  //getElementsByName(name)
  var inputs=document.getElementsByName("text1");
  var lengths=inputs.length;
  alert(lengths)

document.write()//不换行的输出,
document.writeln()//换行输出
 }
</script>

<body>
<div name="div1" id="one">
 1
</div>
<div name="div1" id="one">
 
</div>
<form name="myform" id="form1">
 <input type="text" name="text1" value="张三">
 <input type="text" name="text2" value="李四">

</form>
</body>

getElementsByClassName() 返回带有指定classname指定名称的对象的集合

   function byclass (classname) {
      if(document.getElementsByClassName){
	    return document.getElementsByClassName(classname)
	  }else{
	    var tag= document.getElementsByTagName("*");
         var lengths=tag.length;
		 var divs=[];
		 for (var i=0; i<lengths; i++) {
		    if(tag[i].className==classname){
			   divs.push(tag[i])
			}
		 }
		 return divs;
	  }
	  
   }

 alert(byclass("aaa").length)
<div name="div1" id="one" class="aaa">
</div>
<div name="div1" id="one" class="aaa">
</div>

二、节点三属性:

文档中的每个成分都是一个节点.(包括文本也是节点)，节点三个属性：
　　1. nodeName : 节点的名称
　　2. nodeValue ：节点的值
　　3. nodeType ：节点的类型
节点的属性
       a. nodeName（节点名称）
           元素节点的 nodeName 是标签名称
           属性节点的 nodeName 是属性名称
           文本节点的 nodeName 永远是 #text
           文档节点的 nodeName 永远是 #document

b. nodeValue（节点值）
1. 元素节点的 nodeValue 是 undefined 或 null
　　 2. 文本节点的 nodeValue 是文本自身
　　3. 属性节点的 nodeValue 是属性的值

<body>
<div>文本</div>
<div>文本</div>
</body>
1、innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法
element.innerHTML 会直接返回element节点下所有的HTML化的文本内容
document.body.innerHTML //返回"<div>文本</div><div>文本</div>";

同样逆向的：

document.body.innerHTM="<div>文本</div><div></div>"会生成
！注意 innerHTML方法只能作用于元素节点调用；文本节点并不能使用这个方法返回undefined！
2、nodeValue是一个HTML DOM的对象属性；

同样的 可以通过 nodeValue设置节点的文本内容也可以直接返回文本内容

直接用节点对象调用就都可以： 

document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”

另外 nodeValue 属性并不只存在于文本节点下 元素节点和属性节点对象也都具有nodeValue属性
3、textContent
与innerHTML方法类似会返回对象节点下所有的文本内容

但是区别为 textContent返回的内容只有去HTML化的文本节点的内容 如上例：

document.body.textContent //返回"文本文本" ！注意在DOM中标签换行产生的空白字符会计入DOM中作为文本节点

另外IE8以前不支持textContent属性
4、innerText方法
与textContent方法类似 并且和innerHTML一样也是作用于元素节点上

但是浏览器对于这两种方法解析空白字符的机制不一样；不是很常用

类似的还有outText outHTML等类似操作文本相关的方法，不是很常用不介绍了；

最后要提醒一点：文本与文本节点一定要区分，有些方法是依靠元素节点返回子文本内容，有些方法是文本节点返回自身文本内容，文本节点是对象而文本只是字符串；

c. nodeType（节点类型） : nodeType 属性可返回节点的类型。　　
节点类型节点名字节点值
nodeType(数值) nodeName nodeValue

元素节点 1 标签名 null
属性节点 2 属性名属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>节点属性</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>javascript</li>
10         <li>HTML/CSS</li>
11         <li>jQuery</li>     
12     </ul>
13     <script type="text/javascript">
14         var node = document.getElementsByTagName("li");
15         for(var i = 0; i < node.length; i++){
16             document.write("节点名称：" + node[i].nodeName + "<br/>");
17             document.write("节点的值：" + node[i].nodeValue + "<br/>");
18             document.write("节点类型：" + node[i].nodeType + "<br/>");
19     }
20     </script>
21 </body>
22 </html>

通过节点类型获得节点(兼容性的方法)

<script>
  window.onload=function  () {
    var lis=byclass("one");

	for (var i=0; i<lis.length; i++) {
	  lis[i].onclick=function  () {
	     if(nextnode(this).style.display==""){
		 nextnode(this).style.display="none";
		 }else{
		 nextnode(this).style.display="";
		 }
	  }
	}


    function byclass (classname) {
      if(document.getElementsByClassName){
	    return document.getElementsByClassName(classname)
	  }else{
	    var tag= document.getElementsByTagName("*");
         var lengths=tag.length;
		 var divs=[];
		 for (var i=0; i<lengths; i++) {
		    if(tag[i].className==classname){
			   divs.push(tag[i])
			}
		 }
		 return divs;
	  }
	  
   }

   function nextnode (obj) {
      var nexts=obj.nextSibling;
	  while (nexts.nodeType==3) {
	    nexts=nexts.nextSibling;
	  }
	  return nexts;
   }
  }
</script>


<body>
<ul>
   <li class="one">
     第一选项
   </li>
   <li>
      <ul>
	     <li>第一</li>
		 <li>第二</li>
		  <li>第三</li>
	  </ul>
   </li>
</ul>
<ul>
   <li class="one">
     第二选项
   </li>
   <li>
      <ul>
	     <li>第一</li>
		 <li>第二</li>
		  <li>第三</li>
	  </ul>
   </li>
</ul>
<ul>
   <li class="one">
     第三选项
   </li>
   <li>
      <ul>
	     <li>第一</li>
		 <li>第二</li>
		  <li>第三</li>
	  </ul>
   </li>
</ul>
</body>

三、节点的关系属性

对象.parentNode 获得父节点的引用
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点
对象.lastChild 获得第一个子节点\
对象.nextSibling 获得下一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用

缺点:兼容性不好。

通过一些属性可以来遍历节点树：

1、parentNode//获取所选节点的父节点，最顶层的节点为#document

<div id="text">
   <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
   var mynode= document.getElementById("con");
    document.write(mynode.parentNode.nodeName);
</script>

parentNode 获取指点节点的父节点
DIV

 1 <div id="text"> 
 2     <p>
 3     parentNode 
 4     <span id="con"> 获取指点节点的父节点</span>
 5     </p>
 6 </div> 
 7 <script type="text/javascript">
 8     var mynode= document.getElementById("con");
 9     document.write(mynode.parentNode.parentNode.nodeName);
10 </script>

parentNode 获取指点节点的父节点
DIV

2、childNodes //获取所选节点的子节点们

        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div = document.getElementById("myDiv");
        alert(div.childNodes.length);//7

3、firstChild //firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL

node.firstChild
//与elementNode.childNodes[0]是同样的效果。

4、lastChild //lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：

node.lastChild
//与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

找到指定元素(div)的第一个和最后一个子节点:

<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div>
  <script type="text/javascript">
       var x=document.getElementById("con");
        document.write(x.firstChild.nodeName + "<br/>");
        document.write(x.lastChild.nodeName + "<br/>");
    </script>

5、nextSibling //获取所选节点的后一个兄弟节点列表中最后一个节点的nextSibling属性值为null

6、previousSibling //获取所选节点的前一兄弟节点列表中第一个节点的previousSibling属性值为null

两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。

1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>nextSibling</title>
 6 </head>
 7 <body>
 8     <ul id="u1">   
 9         <li id="a">javascript</li>
10         <li id="b">jquery</li>   
11         <li id="c">html</li>   
12     </ul>   
13     <ul id="u2">   
14         <li id="d">css3</li>   
15         <li id="e">php</li>   
16         <li id="f">java</li>   
17     </ul>   
18     <script type="text/javascript">
19         function get_nextSibling(n){
20             var x=n.nextSibling;
21             while (x && x.nodeType!=1){
22                 x=x.nextSibling;
23             }
24             return x;
25         }
26     
27         var x=document.getElementsByTagName("li")[0];
28         document.write(x.nodeName);
29         document.write(" = ");
30         document.write(x.innerHTML);
31         
32         var y=get_nextSibling(x);
33         
34         if(y!=null){
35             document.write("<br />nextsibling: ");
36             document.write(y.nodeName);
37             document.write(" = ");
38             document.write(y.innerHTML);
39         }else{
40           document.write("<br>已经是最后一个节点");      
41         }
42     </script>
43 </body>
44 </html>

运行结果
LI = javascript 

nextsibling: LI = jquery

通过节点属性关系获取子节点兼容的方法

<script>
  window.onload=function  () {
 var outdiv=getElementById("outdiv")
 var innerdiv=getElementById("innerdiv")
 var outdiv=document.getElementById("outdiv");
 var childs=outdiv.childNodes;
 alert(childs.length)
//文档节点
alert(document.nodeType)
alert(document.nodeName)
alert(document.nodeValue)
for (var i=0; i<childs.length; i++) {
    alert(childs[i].nodeValue)
}
//父节点
var innerdiv=document.getElementById("innerdiv");
var father=innerdiv.parentNode;
alert(father.nodeName);
//最后一个子节点
var innerdiv=document.getElementById("innerdiv");
var last=innerdiv.lastChild;
alert(last.nodeName);
//获得所有子节点的兼容方法
function getchilds (obj) {
var childs=obj.childNodes;
var arr=[];
for (var i=0; i<childs.length; i++) {
if(childs[i].nodeType==3 && /^\s+$/.test(childs[i].nodeValue)){
 continue;
}else{
 arr.push(childs[i])
 }
}
return arr;
}
var outdiv=document.getElementById("outdiv")
alert(getchilds(outdiv).length)
//获得最后一子节点的方法
function last (obj) {
 var last=obj.lastChild;
 while(last.nodeType==3){
 last=last.previousSibling;
}
return last;
}

alert(last(outdiv).nodeName);
  }
</script>

<body>
<div id="outdiv" class="one">
  我是外层的div
  <p class="two">
     我是p标签
  </p>
  <div id="innerdiv" class="two">
    <span>
	  我是内层div里面的span标签
	</span>
	</div>
  <!--我是注释  后盾网视频教程-->
  <h3 class="two">
     我是h3标签
  </h3>
  <u class="two">我是下划线</u>
  </div>
</body>

四、对节点进行操作
1、查找结点

a. 采用节点之间的关系去拿根节点： document.documentElement ;
b. 采用方法去拿

document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在不能太过依赖id

document.getElementsByTagName();//标签名

document.getElementsByClassName();//类名

document.getElementsByName();//name属性值，一般不用

document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null

document.querySelectorAll()//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

       <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");//在div下调用
        alert(p1.length);//3  div节点下的p元素只有三个
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4  document节点下的p元素有四个
        var p3=document.querySelectorAll("p");
        alert(p3.length);//4
        document.body.appendChild(document.createElement("p"));//创建新元素P,并添加到body中
        alert(p1.length);//3   div节点下的p元素依然只有三个
        alert(p2.length);//5   在body中添加了一个新的P元素，该方法是“动态的”，因此，长度发生了变化
        alert(p3.length);//4   该方法是“静态的”，因此，无论发生什么变化，p3的值依然不会发生改变

2、删除节点:
removeChild() : 采用父节点删除子节点

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

相比于removeChild()，remove()方法不太常见，但是却非常简单。该方法不用调用其父节点，直接在当前节点使用remove()方法就可以删除该节点，无返回值

remove()方法常用于删除元素节点与文本节点，不可用于特性节点

<div id="test" title='div'>123</div>
<script>
//文本节点
console.log(test.childNodes[0]);//'123'
test.childNodes[0].remove();
console.log(test.childNodes[0]);//undefined

//特性节点
console.log(test.attributes.title);//'div'
//报错，remove()方法无法用于删除特性节点
try{test.attributes[0].remove()}catch(e){
    console.log('error');
}
//元素节点
console.log(test);
test.remove();
</script>

3、创建元素节点：
document.createElement() : 创建一个标签节点

var oDiv = document.createElement("div");
console.log(oDiv);//<div>
var oDiv = document.createElement('<div id="box"></div>');
console.log(oDiv.id);//'box'
var iframe = document.createElement("<iframe name = 'myframe'></iframe>");
var input = document.createElement("<input type='checkbox'>);
var button = document.createElement("<button type = 'reset'></button>");
var radio1 = document.createElement("<input type='radio' name ='choice' value = '1'>");
var radio2 = document.createElement("<input type='radio' name ='choice' value = '2'>");
所有节点都有一个ownerDocument的属性，指向表示整个文档的文档节点document；在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性
<div id="myDiv"></div>
<script>
console.log(myDiv.ownerDocument);//document
var newDiv = document.createElement('div');
console.log(newDiv.ownerDocument);//document
console.log(newDiv.ownerDocument === myDiv.ownerDocument);//true
</script>

创建属性节点
document.createAttribute("属性名");
对象.属性="属性值"
对象.setAttribute(属性名,属性值)
对象.getAttribute(属性名,属性值)

1.操作内容
1.innerHTML 用来设置或获取对象起始和激素标签内的内容(识别html标签)
2.innerText 用来设置或获取对象起始和激素标签内的内容 (IE)
textContent用来设置或获取对象起始和激素标签内的内容 (FF)

3.outerHTML 用来设置或获取包括本对象在内起始和激素标签内的内容(识别html标签)
outerText 用来设置或获取包括本对象在内起始和激素标签内的内容

<script>
  function getContent (objs,val) {
     if(document.all){
	   if(val){
	     objs.innerText=val
	   }else{
	      return  objs.innerText
	   }
	 }else{
	    if(val){
	     objs.textContent=val
	   }else{
	      return  objs.textContent
	   }
	 
	 }
  }
  window.onload=function  () {
    var div1=document.getElementById("div1");
	var div2=document.getElementById("div2");
	var but=document.getElementById("but");
     but.onclick=function  () {
	    //var contents=div1.innerHTML;
		//div2.innerHTML=contents;
		 var contents=getContent(div1)
		getContent(div2,contents);
     }
  }
</script>

2.操作属性
1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))

2. getAttribute("属性") 获取给定的属性的值
setAttribute("属性","值") 设置或是添加属性

<script>
  window.onload=function  () {
    var links=document.getElementsByTagName("a")[0];
	//alert(links.href)
	//links.href="2.html";
	//alert(links.title)
	//links.title="百度";
	//links.title="百度";
	 //getAttribute("属性")  获取给定的属性的值
     // setAttribute("属性","值")  设置或是添加属性

	 alert(links.getAttribute("href"))
	 links.setAttribute("href","2.html")
	
  }
</script>


<body>
 <a href="1.html"  >链接</a>
</body>

3、操作样式

1.行内样式
对象.style.属性
对象.style.属性=值 (设置、获取、添加属性)
****************************************************
遇到属性是"-"链接的，要将"-"去掉，后面的单词的首字母大写
****************************************************

2.css层叠样式

3.行内样式和css层叠样式通用的方式

<script>
window.onload=function  () {
  var one=document.getElementById("one");
  one.onmouseover=function  () {
    //alert(one.style.color)
     one.style.color="blue";
	 one.style.backgroundColor="red";
	 one.style.fontSize="13px";
  }
  one.onmouseout=function  () {
     one.style.color="red";
	 one.style.backgroundColor="blue";
	 one.style.fontSize="11px";

  }
}
</script>

<a href="#" style="color:red;background-color:blue;padding:3px" id="one">链接</a>

css层叠样式的操作

1.通过ID来更改样式,通过className更改样式

<style>
   #one{
     width:200px;
	 height:200px;
	 border:1px solid red;
	 color:red;
	 font-size:14px;
	 padding:24px;
   }
   #two{
     width:200px;
	 height:200px;
	 border:1px solid blue;
	 color:blue;
	 font-size:19px;
	 padding:15px;
   }
</style>
<script>
   window.onload=function  () {
      var one=document.getElementById("one");
	  var but=document.getElementById("but");
      but.onclick=function  () {
	    one.id="two";
      }

   }
   window.onload=function  () {
      var one=document.getElementById("one");
	  var but=document.getElementById("but");
      but.onclick=function  () {
	    one.className="div2";
      }
</script>

<div id="one" class="div1"></div>

2.更改或者获取或者设置某个属性的值

document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值

document.styleSheets 样式表的集合
document.styleSheets[0].rules 样式规则的列表
document.styleSheets[0].rules.style 样式规则的集合
document.styleSheets[下标].rules[下标].style.属性
适用于IE
**************************************************************
document.styleSheets[下标].cssRules[下标].style.属性
document.styleSheets[下标].cssRules[下标].style.属性=值
适用于FF
***************************************************************

document.styleSheets[0].rules[0].style.width
cssrule().width
cssrule().height="500px";
cssrule().margin="100px";

function cssrule (a,b) {
  var a= a || 0;
  var b= b ||0;
  if(document.all){
   return  document.styleSheets[a].rules[b].style 
  }else{
  return document.styleSheets[a].cssRules[b].style
  }
}
var b= b ||0;
如果b不等于undefined和null，也就是说b有东西那a就等于b的值
不然就等于默认值0
var a= b || c
在js中，这相当于一个赋值语句，如果b的值大于0或为true，那么就把b的值赋给a，否在就把c的值赋给
布尔值，javascript中以下值会被转换为false
1.false 2.undefined 3.null 4.0 5.-0 6.NaN 7."" 8.''

3.动态的添加删除css样式规则
document.styleSheets[下标].insertRule("选择器{属性:值}",位置) deleteRule(位置)

document.styleSheets[下标].addRule("选择器","属性:值",位置)
document.styleSheets[0].addRule(".div1","margin:200px",0);
document.styleSheets[0].removeRule(1);
//对象.currentStyle.属性  IE   用来获得实际的样式属性
//getComputedStyle(对象,null)   FF  用来获得实际的样式属性
 var one=document.getElementById("one");
one.currentStyle.width
getComputedStyle(one,null).width

具体使用

动态生成iframe

		var strUrl = Leopard.getContextPath() +
		"/DoMyServlet?className=ExcelPoiAction&methodName=createExcel&btnCode=empdata&forWard=isFile&namesalt="+namesalt+"&func="+_func
	    +"&pbean="+encodeURI(encodeURI(strwhere))+"&btnCode"+empexcel;
		var ifm;
		if (document.getElementById("empexcel_iframe") == undefined) {
			ifm = document.createElement("IFRAME");
			ifm.setAttribute("id", "empexcel_iframe");
			ifm.setAttribute("name", "empexcel_iframe");
			ifm.style.height = "0";
			ifm.style.width = "0";
			ifm.style.display = "block";
			ifm.src = "";
			document.body.appendChild(ifm);
			document.getElementById("empexcel_iframe").attachEvent(
					"onload",
					function() {
						window.frames['empexcel'].document.getElementById("empexcel").click();
					});
		} else {				ifm = document.getElementById("empexcel_iframe");			}
		ifm.src = strUrl;

public class ExcelPoiAction {
public void createExcel() throws IOException {
		HttpServletRequest req = Request.getInst();
		this.funcCode = req.getParameter("func");		//功能单元
		//this.strWhere = req.getParameter("pbean");		//附件查询条件
		this.strWhere =	java.net.URLDecoder.decode(req.getParameter("pbean"),"utf-8");
		if (!StringUtils.isEmpty(strWhere)) {
			try {
				objWhere = new JSONObject("{" + strWhere + "}");
			} catch (JSONException e) {}
		}
		//获取业务参数
		String busiStr = req.getParameter("busiData");
		if(!StringUtils.isEmpty(busiStr)){
			try {
				this.busiData = JsonUtils.transferToBean(busiStr);
			} catch (Exception e) {}
		}
		exeFuncAct("beforeEmp");					//导出前执行
		HttpServletResponse resp = Response.getInst();
		resp.setContentType("application/x-msdownload;charset=GBK");
		String personBtnCode = req.getParameter("btnCode")==null?this.btnCode:req.getParameter("btnCode").toString();
		String path = getDemoDirSource();// 存储路径
		String name = getDemoName(personBtnCode);// 模板名称
		
		//12.21修改
	    String demoSourcre = path + "/" + name;// 模板绝对路径
	    
	    String nameSalt = req.getParameter("namesalt");  
	    if(!StringUtils.isEmpty(nameSalt)){
	      String fileName = name.split("\\.")[0] +"_"+nameSalt+"."+name.split("\\.")[1];
	      resp.setHeader("Content-Disposition", "attachment; filename=" + ENCODE(fileName, "ISO-8859-1"));
	    }else{
	      resp.setHeader("Content-Disposition", "attachment; filename=" + ENCODE(name, "ISO-8859-1"));
	    }
		// 输出流
		OutputStream out = resp.getOutputStream();
		// 获取数据
		Map<String, List<Map<String, Object>>> data = InitDataByFuncExcelConfig();

		CreateExcel excel = new CreateExcel(demoSourcre, out, busiData);
		excel.setData(data);

		// 创建数据
		excel.CreateEx();
		exeFuncAct("afterEmp");
	}
}

创建文本节点
对象.innerHTML="";
document.createTextNode("文本");

docuemnt.createTextNode("内容") ：创建一个文本节点

var elea=document.createElement("a");
 elea.href="#";
 elea.title="我是一个链接";
 elea.innerHTML="链接";
 elea.style.color="red";
var eleh3=document.createElement("h3");
var h3text=document.createTextNode("百度");
eleh3.appendChild(h3text);
var elep=document.createElement("p");
elep.innerHTML="我是p标签";

divs=document.createElement("div");
divs.style.width="500px"
divs.style.height="300px";
divs.style.border="5px solid red";
divs.style.position="absolute";
divs.style.top="100px";
divs.style.left="260px";
var innerbut=document.createElement("a");
innerbut.innerHTML="X";
innerbut.style.styleFloat="right";

4、添加结点:

parentNode.insertBefore(someNode,designatedNode):

父对象.insertBefore(要插入的对象,之前的对象)将某个元素插入到指定的节点（designatedNode）前
parentNode.appendChild(someNode):向元素内末尾插入某个节点

父对象.appendChild(追加的对象) 插入到最后

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

appendChild() 方法向节点添加最后一个子节点。

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>

<script type="text/javascript">
	function modifyDOM(){
		document.getElementById("txt").innerHTML="用户名：";
		document.getElementById("userName").value="Jack";
	}
	
	function addDOM(){
		var para=document.createElement("p");
		var node=document.createTextNode("...前...");
		var para2=document.createElement("p");
		var node2=document.createTextNode("...后...");
		para.appendChild(node);
		para2.appendChild(node2);
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.insertBefore(para, son1);
		parent.appendChild(para2);
	}
	
	function removeDOM(){
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.removeChild(son1);
	}
</script>

<body>
<div id="parent">
	<div id="son1">
		<font id="txt">:</font><input type="text" id="userName" name="userName"/>
	</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>

删除节点，父对象.removeChild(删除的对象)。如果确定要删除节点，最好也清空内存对象=null;

<script>
  window.onload=function  () {
     var but=document.getElementById("but");

	 but.onclick=function  () { 	 
	    divs=document.createElement("div");
		var innerbut=document.createElement("a");
	    innerbut.innerHTML="X";
		divs.appendChild(innerbut);
		document.body.appendChild(divs);
       innerbut.onclick=function  () {
          document.body.removeChild(divs);
		  divs=null;
	   }
	   
	 }
  }
</script>

<input type="button" value="登录" id="but">

修改(替换)节点，父对象.replaceChild(要修改的对象,被修改的);

<script>
  window.onload=function  () {
   var elea=document.createElement("a");
	//document.body.appendChild(elea);
   var innerdiv=document.getElementById("innerdiv");
    var spans=innerdiv.firstChild;
	var eleh3=document.createElement("h3");
	var h3text=document.createTextNode("百度");
	    eleh3.appendChild(h3text);
	    innerdiv.insertBefore(eleh3,spans);
   var elep=document.createElement("p");
   elep.innerHTML="我是p标签";
   innerdiv.replaceChild(elep,eleh3)
   innerdiv.removeChild(elep)
   elep=null;
   alert(elep.innerHTML)
  }
</script>


<div id="outdiv" class="one">
  我是外层的div
  <p class="two">
     我是p标签
  </p>
  <div id="innerdiv" class="two">
    <span>
	  我是内层div里面的span标签
	</span>
	</div>
  <!--我是注释  百度-->
  <h3 class="two">
     我是h3标签
  </h3>
  <u class="two">我是下划线</u>
  </div>
</body>

	<div id="parent">
	<div id="son1">
		<font id="txt">:</font><input type="text" id="userName" name="userName"/>
	</div>
    </div>
	function addDOM(){
		var para=document.createElement("p"); //创建元素
		var node=document.createTextNode("...前...");//创建文本，给p里面加内容
		var para2=document.createElement("p");
		var node2=document.createTextNode("...后...");
		para.appendChild(node);
		para2.appendChild(node2);
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.insertBefore(para, son1);
		parent.appendChild(para2);
	}
	
	function removeDOM(){
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.removeChild(son1);
	}

5、修改或替换结点:
parentNode.replaceChild(someNode,replacedNode):用某个元素替换某个被替换的元素
parentNode.removeChild(someNode):移除某个节点注意以上的操作节点方法都是在指定父节点才能使用的。

<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>HTML DOM</title>
  <script type=text/javascript>
      function replaceMessage()
      {
       var oNewp=document.createElement("p");
       var oText=document.createTextNode("World Hello");
       oNewp.appendChild(oText);
       var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);
      }
      </script>
</head>
<body onload="replaceMessage();">
      <p>hello world!</p>
</body>
</html>

6、其他节点操作方法：

cloneNode(boolean):克隆节点，参数是一个布尔值，true代表深度复制，包含复制节点的子节点；false为浅复制，不包含子节点。此方法适合所有的节点。

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>        
</ul>
<script>
var oList = document.getElementById('list');
oList.index = 0;

var deepList = oList.cloneNode(true);
//成功复制了子节点
console.log(deepList.children.length);//6
//但并没有复制属性
console.log(deepList.index);//undefined
var shallowList = oList.cloneNode();
//浅复制不复制子节点
console.log(shallowList.children.length);//0
</script>

7、修改文本节点

appendData(data); 将data加到文本节点后面

deleteData(start,length); 将从start处删除length个字符

insertData(start,data) 在start处插入字符,start的开始值是0;

replaceData(start,length,data) 在start处用data替换length个字符 splitData(offset) 在offset处分割文本节点

substringData(start,length) 从start处提取length个字符

8、属性操作

getAttribute(name) 通过属性名称获取某个节点属性的值

setAttribute(name,value); 修改某个节点属性的值

removeAttribute(name) 删除某个属性

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>HTML DOM</title>
   <script type=text/JavaScript>
   function   Load_message()
   {
    var oimg=document.getElementById("a");
       alert(oimg.getAttribute("border"));
    oimg.setAttribute("alt","DOM Test");
   }
   </script>
</head>
<body onload="Load_message();">
   <img border="0" width="100" height="150" id="a"/>
</body>
</html>

js动态生成表格

动态生成表格

	<table id="studentTable" align="center" border="1px;" cellpadding="0px;">
			<tr>
				<th>姓名</th><th>年龄</th><th>得分</th>
			</tr>
		        </table>
		
				var dataObj=eval("("+xmlHttp.responseText+")");
				var st=document.getElementById("studentTable");
				alert(dataObj.students.length);
				var newTr; // 行
				var newTd0; // 第一列
				var newTd1; // 第二列
				var newTd2; // 第三列
				for(var i=0;i<dataObj.students.length;i++){
					var student=dataObj.students[i];
					newTr=st.insertRow();
					newTd0=newTr.insertCell();
					newTd1=newTr.insertCell();
					newTd2=newTr.insertCell();
					newTd0.innerHTML=student.name;
					newTd1.innerHTML=student.age;
					newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;
				}

添加表单行

	<script type="text/javascript">
		function addOptions(){
			//创建一个新的节点
			//第一种方式
			/*var option = document.createElement("option") ;
			option.value = "小学" ;
			option.text = "小学" ;

			//拿到下拉框，加入小学
			document.getElementsByTagName("select")[0].options.add(option) ;*/
			
			//第二种方式
			//获得select对象
			//var select = document.getElementsByTagName("select")[0] ;

			//select.innerHTML = select.innerHTML + "<option value = '小学'>小学</option>" ;

			//第三种
			var option = document.createElement("option") ;
			option.value = "小学" ;
			option.text = "小学" ;

			//获得select对象
			var select = document.getElementsByTagName("select")[0] ;
			select.appendChild(option); 


		}

		function fun(){
			//拿到div对象
			var d = document.getElementById("d") ;
			//创建一个img标签对象
			var img = document.createElement("img") ;
			//指定属性
			img.src = "images/1.jpg" ;
			img.style.width = "200px" ;
			img.height = "300" ;

			//将图片添加到div标签中
			d.appendChild(img) ;
		}
	</script>
 <body>
	<input type="button" value="添加选项" onclick="addOptions()"/>
	<input type="button" value="添加一副图片" onclick="fun()">
	<select>
		<option>本科</option>
		<option>专科</option>
		<option>高中</option>
		<option>初中</option>
	</select>
	
	<div id = "d"></div>

 </body>

jquery操作dom节点

1.内部插入

$("p").append("<b>nick</b>");    //每个p元素内后面追加内容
$("p").appendTo("div");    　　　 //p元素追加到div内后
$("p").prepend("<b>Hello</b>");  //每个p元素内前面追加内容
$("p").prependTo("div");    　   //p元素追加到div内前

2.外部插入

$("p").after("<b>nick</b>");     //每个p元素同级之后插入内容
$("p").before("<b>nick</b>");    //在每个p元素同级之前插入内容
$("p").insertAfter("#test");     //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test");    //所有p元素插入到id为test元素的前面

3.替换

$("p").replaceWith("<b>Paragraph. </b>");    //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉所有 selector匹配到的元素

4.删除

$("p").empty();     //删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove();    //删除所有匹配的元素,包括本身
$("p").detach();    //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

5.复制

$("p").clone()    　　//克隆元素并选中克隆的副本
$("p").clone(true)   //布尔值指事件处理函数是否会被复制

	$(document).ready(function(){
		// 操作DOM节点
		// 1，查找节点
		/* var li2=$("ul li:eq(1)");
		var li2_txt=li2.text();
		alert(li2_txt); */
		
		// 2，创建节点
		/* var li1=$("<li title='这是马化腾'>马化腾</li>");
		var li2=$("<li title='这是李彦宏'>李彦宏</li>");
		var li22=$("ul li:eq(1)");
		$("ul").append(li1);
		li2.insertAfter(li22); */
		
		// 3，删除节点
		// $("ul li:eq(1)").remove();
		
		// 操作DOM属性
		// 获取属性
		/* var li2=$("ul li:eq(1)");
		var li2_attr=li2.attr("title");
		alert(li2_attr); */
		
		// 设置属性
		// $("ul li:eq(1)").attr("title","你懂的");
		
		// 删除属性
		// $("ul li:eq(1)").removeAttr("title");
		
		// 操作DOM节点样式
		// 获取样式
		/* var li2=$("ul li:eq(1)");
		var li2_class=li2.attr("class");
		alert(li2_class); */
		
		// 设置样式
		// $("ul li:eq(1)").attr("class","lc2");
		
		// 追加样式
		// $("ul li:eq(1)").addClass("lc3");
		
		// 移除样式
		// $("ul li:eq(1)").removeClass("lc");
		
		// 设置和获取HTML，文本和值
		// 获取html
		/* var l1_html=$("ul li:eq(0)").html();
		alert(l1_html); */
		
		// 设置html
		// $("ul li:eq(0)").html("<font color=red>哈哈</font>");
		
		// 获取文本
		/* var l1_text=$("ul li:eq(0)").text();
		alert(l1_text); */
		
		// 设置文本
		// $("ul li:eq(0)").text("呵呵");
		
		// 遍历节点
		// children()
		/* var b=$("body").children();
		alert(b.length);
		var u=$("ul").children();
		alert(u.length);
		for(var i=0;i<u.length;i++){
             //u[i]原生的dom节点 
			// alert(u[i].innerHTML);
			alert($(u[i]).html());
		} */
		
		// next() 临近的下一个兄弟节点
		/* var l=$("ul li:eq(1)").next();
		alert(l.html()); */
		
		// prev() 上一个dom节点
		/* var l=$("ul li:eq(1)").prev();
		alert(l.html()); */
		
		// CSS-DOM操作
		// 获取css样式
		/* var c=$("#jq").css("color");
		alert(c); */
		
		// 设置css样式
		$("#jq").css("color","blue");
	});
	
	<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
    </ul>

具体使用:

jQuery 添加新内容有以下四个方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。

创建dom节点

var li1=$("<li title='这是马化腾'>马化腾</li>");
		var li2=$("<li title='这是李彦宏'>李彦宏</li>");
		var li22=$("ul li:eq(1)");
		$("ul").append(li1);
		li2.insertAfter(li22);

删除节点
		// $("ul li:eq(1)").remove();
删除属性
		// $("ul li:eq(1)").removeAttr("title");

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>

jQuery prepend() 方法在被选元素的开头插入内容。

<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在开头追加文本</b>。 ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在开头添加列表项</li>");
	});
});
</script>
</head>
<body>
	
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
	
</body>

我们只在被选元素的开头/结尾插入文本/HTML。append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

<script>
function appendText(){
	var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
	var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
	var txt3=document.createElement("p");
	txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
	$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>

</body>

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
});
</script>
</head>

<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

<script>
function afterText(){
	var txt1="<b>I </b>";                    // 使用 HTML 创建元素
	var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
	var txt3=document.createElement("big");  // 使用 DOM 创建元素
	txt3.innerHTML="jQuery!";
	$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}
</script>
</head>
<body>

<img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()">之后插入</button>

</body>

append/prepend和after/before有什么区别呢

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

append

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
--------------------------------------------
<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
-------------------------------------------
<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

              //初始化字典数据
                $Core.DicCache.initDictionary("installdevName,customerType,publicserviceName,userdevState", function () {  
                		var approveState = data.data.approveState;
                		var appendRow = "";
                		if("0"!=approveState&&"1"!=approveState&&""!=approveState){
                			appendRow ="<tr align='center' id='appendRow'> <td   width= '16% ' colspan='3'>"+data.data.approveUserName+
                    		"</td><td  id='stateu' width= '16% ' colspan='3'>"+$Core.DicCache.get("userdevState")[approveState]+
                    		"</td><td   width= '16% ' colspan='3'>"+data.data.approveAdvice+
                    		"</td> <td   width= '20% ' colspan='3'>"+data.data.approveTime+
                    		"</td></tr>"
                    		$("#newRow").after(appendRow);
                			if("4"==approveState||"5"==approveState){
                				var appendRowT = "<tr align='center'> <td   width= '16% ' colspan='3'>"+data.data.approvePersonNameSecond+
                        		"</td><td   width= '16% ' colspan='3'>"+$Core.DicCache.get("userdevState")[approveState]+
                        		"</td><td   width= '16% ' colspan='3'>"+data.data.approveAdviceSecond+
                        		"</td> <td   width= '20% ' colspan='3'>"+data.data.approveTimeSecond+
                        		"</td></tr>"
                				$("#appendRow").after(appendRowT);
                				$("#stateu").html("审批通过");
                			}
                		}
                });

序列生成

    <table cellspacing="0" cellpadding="0" id="col">
      <tr id="newRow">
        <td width="20" class="tit">序号</td>
        <td width="160" class="tit">验收项目名称</td>
        <td width="120" class="tit">生产厂家</td>
      </tr>
      <tr>
        <td>1</td>
        <td>气化器</td>
        <td></td>
      </tr>
 </table>
                 	var oTable = $("#col");
                 	for(var i=1,a=0;i<oTable[0].rows.length;i++){  
                        oTable[0].rows[i].cells[0].innerHTML = (++a);  
                    }  
                 	var dictionaryItems = oTable[0].rows[oTable[0].rows.length-1];
                 	dictionaryItems.id="dicItem";

appendTo()

方法在被选元素的结尾（仍然在内部）插入指定内容。

   var $li = $('#' + file.id),
                        $percent = $li.find('.progress span');
                    //console.log("percentage:", percentage);
                    // 避免重复创建
                    if (!$percent.length) {
                        $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                    }

$( "input" ).focus(function() {
  $( "<span>获取焦点!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});

简单的省市二级联动与三级联动

遍历Json对象

给dom节点增加数据 options new Option（text，id）固定格式前面文本后面id

        shi.options.length=0；重置市  
            var dataObj=eval("("+xmlHttp.responseText+")");
				for(var i=0;i<dataObj.rows.length;i++){
					var o=dataObj.rows[i];
					shi.options.add(new Option(o.text,o.id));
				}

省：
<select id="sheng" onchange="loadInfo()">
	<option value="1">江苏省</option>
	<option value="2">山东省</option>
	<option value="3">浙江省</option>
</select>
&nbsp;&nbsp;
市
<select id="shi">
</select>

//
</body>后台
		PrintWriter out=response.getWriter();
		String shengId=request.getParameter("shengId");
		JSONObject resultJson=new JSONObject();
		JSONArray jsonArray=new JSONArray();
		JSONObject temp=null;
		switch(Integer.parseInt(shengId)){
			case 1:{
				temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
				break;
			}
			case 2:{
				temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
				break;
			}
			case 3:{
				temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
				break;
			}
		}
		resultJson.put("rows", jsonArray);
		out.println(resultJson);
		out.flush();
		out.close();
	}

三级联动

	<script type="text/javascript">
	<!--
		var arr = ["中国","美国","日本"] ;
		  
		  arr["中国"] = ["北京","上海","钓鱼岛"] ;
		  arr["美国"] = ["纽约","华盛顿","旧金山"] ;
		  arr["日本"] = ["东京","大阪","神户"] ;
		
		  arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
		  arr["上海"] = ["浦东","金山","崇明","浦西"] ;
		  arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;

		  arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
		  arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
		  arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;

		  arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
		  arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
		  arr["神户"] = ["神户1","神户2","神户3","神户4"] ;

		  function init(){
			  //填充国家
			  fillData(arr,"country") ;

			   //填充省市
			  fillData(arr[arr[0]],"province") ;
			    //填充地区
			  fillData(arr[arr[arr[0]][0]],"area") ;
		  }

		  function fillData(arr,id){
			    //清空select选项
			  document.getElementById(id).options.length = 0 ;
			  //添加选项
			  for(var i = 0 ;i<arr.length ;i++){
				  //创建一个option对象
				  //第一种
				 /* var option = new Option() ;
				  option.text = arr[i] ;
				  option.value = arr[i] ;*/

				  //第二种
				  var option = new Option(arr[i],arr[i]) ;

				  //将option对象添加到select中
				  document.getElementById(id).options.add(option) ;
			  }
		  }

		  function changePro(coun){
			
			  //添加省市
			  fillData(arr[coun],"province") ;

			  //添加地区
			  fillData(arr[arr[coun][0]],"area") ;
		  }

		  function changeArea(pro){
			//改变地区
			fillData(arr[pro],"area") ;
		  }
	//-->
	</script>
 <body onload = "init()">
	 国家：<select id = "country" onchange = "changePro(this.value)"></select>
	 省市：<select id = "province" onchange = "changeArea(this.value)"></select>
	 地区：<select id = "area"></select>
 </body>

wespten

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS操作DOM元素代码的编写

JS操作DOM元素代码的编写DOM树传统的html文档顺序是:document->html->(head,body)根据 DOM，HTML 文档中的每个成分都是一个节点。整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点一、document对象(DOM...
复制链接

扫一扫