DOM操作

一、DOM的含义

 

             *     文档对象模型

             *     DOM是关于创建，插入，修改，删除页面元素的标准

             *     DOM赋予我们操作页面的能力

             *     

             *     页面的内容都是字符串，JS会把这些字符串转成DOM树，DOM树会把字符串转成节点，其实我们操作DOM的根本就是操作节点

二、DMO节点

 

1. <script>
2. /*
3. * attributes
4. * 属性节点
5. * 返回元素身上的所有属性节点，每个属性都会有一个自己对应的下标
6. * 它有一个length属性，代表元素身上有多少个属性节点
7. *
8. * childNodes
9. * 元素身上的第一层子节点，返回元素身上的所有子节点的集合（第一层）   
1. 子节点包含 文本节点、元素节点、注释节点 
10. *
11. * nodeName
12. * 节点的名称
13. *
14. * nodeType
15. * 节点的类型
16. * 返回的是一个数字
17. *
18. */
19. window.onload=function(){
20. var box=document.getElementById("box");
21. var attr=box.attributes;//元素属性节点的集合
22. console.log(attr);
23. console.log(attr[0]);//id="box"
25. var child=box.childNodes;//元素子节点的集合
26. console.log(child);
28. //元素节点（标签）
29. console.log(box.nodeName);//DIV
30. console.log(box.nodeType);//1
32. //属性节点
33. console.log(attr[0].nodeName);//id
34. console.log(attr[0].nodeType);//2
36. //文本节点
37. console.log(child[0].nodeName);//#text
38. console.log(child[0].nodeType);//3
40. //注释节点
41. console.log(child[3].nodeName);//#comment
42. console.log(child[3].nodeType);//8
44. //文档节点
45. console.log(document.nodeName);//#document
46. console.log(document.nodeType);//9
48. }
49. </script>
50. <div id="box"class="color" style=" 100px;">
51. <p><span></span></p>
52. kaivon
53. <!--这里是注释-->
54. </div>

三、tagName

 

             *     节点名称，任何一个节点都有这个属性

             * 

             * tagName

             *     标签名称(全大写)

             *     只有元素节点才有这个属性

1. window.onload=function(){
2. var box=document.getElementById("box");//元素节点
3. var child=box.childNodes;
5. console.log(child[0].nodeName);//#text
6. console.log(child[1].tagName);//undefined
8. console.log(child[1].nodeName);//SPAN
9. console.log(child[1].tagName);//SPAN
11. console.log(box.nodeName);//DIV
12. console.log(box.tagName);//DIV
14. console.log(document.nodeName);//#document
15. console.log(document.tagName);//undefined
16. }
17. <div id="box">
18. <span>aaa</span>
19. </div>

四、parentNode

             *     元素的父节点

             * 

             *     属性节点是没有父节点

1. window.onload=function(){
2. var box=document.getElementById("box");
3. var p=box.querySelector('p');//元素节点
5. console.log(p.parentNode);//div
7. var attr=p.attributes;//属性节点
8. console.log(attr[0].parentNode);//null
10. var child=box.childNodes;//box里的所有子节点
11. console.log(child[3].parentNode);//div#box
13. };
14. <div id="box">
15. <p style=" 100px;"></p>
16. <!--这里是注释-->
17. </div>

五、children

             *     获取到父级下的第一层子元素，它是一个集合，代表所有的子元素

             *     每个子元素都有一个对应的下标

             *     它还有一个length属性，代表子元素的个数

             *     这个children只选择到标签 不包含文本和注释

             *     非标准

             *     

             * childNodes

             *     获取元素的第一层的所有子节点，包含文本、注释 

   s

1. window.onload=function(){
2. var ul=document.querySelector("ul");
4. console.log(ul.childNodes);
6. //所以需要用调用函数
7. function getChild(parent){
8. var child=parent.childNodes;
9. var arr=[];
11. for(var i=0;i<child.length;i++){
12. if(child[i].nodeType==1){
13. //nodeTy==1是标签
14. arr.push(child[i]);
15. }
16. }
18. return arr;
19. }
21. var lis=getChild(ul);
22. console.log(lis);
23. }
24. </script>
25. <ul>
26. <li><span>隐藏1</span></li>
27. <li><span>隐藏2</span></li>
28. <li><span>隐藏3</span></li>
29. <li><span>隐藏4</span></li>
30. <li><span>隐藏5</span></li>
31. <!--这里是注释-->
32. </ul>

六、previousElementSibling

             *     找到上一个兄弟节点

             *     如果找不到的话就返回一个null

1. window.onload=function(){
2. var lis=document.querySelectorAll("li");
4. lis[1].previousElementSibling.style.background='red';//下标数为0的li背景变红
6. console.log(lis[0].previousElementSibling);//null
7. lis[0].previousElementSibling.style.background='red';//报错
8. }
9. </script>
10. <ul>
11. <li><span>隐藏1</span></li>
12. <li><span>隐藏2</span></li>
13. <li><span>隐藏3</span></li>
14. <li><span>隐藏4</span></li>
15. <li><span>隐藏5</span></li>
16. </ul>

7.nextElementSibling

             *     找到下一个兄弟节点

             *     如果找不到的话返回一个null

1. window.onload=function(){
2. var lis=document.querySelectorAll("li");
4. lis[0].nextElementSibling.style.background='red';//小标数为1的li背景变红
6. console.log(lis[4].nextElementSibling);//ull
7. lis[4].nextElementSibling.style.background='red';
8. }
9. </script>
10. <ul>
11. <li><span>隐藏1</span></li>
12. <li><span>隐藏2</span></li>
13. <li><span>隐藏3</span></li>
14. <li><span>隐藏4</span></li>
15. <li><span>隐藏5</span></li>
16. </ul>

8.firstElementChild

             *     父级.firstElementChild

             *     找到第一个子节点

1. window.onload=function(){
2. var ul=document.querySelector("ul");
4. ul.firstElementChild.style.background='red';//获取第一个li
5. }
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li><span>隐藏1</span></li>
11. <li><span>隐藏2</span></li>
12. <li><span>隐藏3</span></li>
13. <li><span>隐藏4</span></li>
14. <li><span>隐藏5</span></li>
15. </ul>

9、lastElementChild

             *     父级.lastElementChild

             *     找到最后一个子节点

1. window.onload=function(){
2. var ul=document.querySelector("ul");
4. ul.lastElementChild.style.background='red';//获取到ul下的最后一个li
5. };
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li><span>隐藏1</span></li>
11. <li><span>隐藏2</span></li>
12. <li><span>隐藏3</span></li>
13. <li><span>隐藏4</span></li>
14. <li><span>隐藏5</span></li>
15. </ul>

10、offsetParent

             *     作用

             *         获取离元素最近的有定位的父级

             *         它会一层一层往上找，直到找到最近的有定位的父级后就把这个父级返回

             *         如果父级都没有定位，那返回body(IE8以及IE8以上)

             * 

             *     语法

             *         元素.offsetParent

             *     注意

             *         遵循一个原则，父级一定要给一个定位

             *         body是没有offsetParent

1. <style>
2. div{
3. width:100px;
4. height:100px;
5. border:1px solid #f00;
6. margin:70px0070px;
7. }
8. #box2{
9. position: absolute;
10. }
11. #box4{
12. position: relative;
13. }
14. </style>
15. <script>
16. window.onload=function(){
17. var box1=document.getElementById("box1");
18. var box3=document.getElementById("box3");
20. console.log(box1.offsetParent);//box2
21. box1.offsetParent.style.background='red';
23. console.log(box3.offsetParent);//box4
24. box3.offsetParent.style.background='blue';
26. console.log(document.body.offsetParent);//null
27. }
28. </script>
29. </head>
30. <body>
31. <div id="box4">box4
32. <div id="box3">box3
33. <div id="box2">box2
34. <div id="box1">box1</div>
35. </div>
36. </div>
37. </div>
38. </body>

11、offsetLeft &offsetTop

             *     作用

             *         找到元素最左边离最近的有定位的父级之间的距离，不带单位，并且不带边框

             *     语法

             *         元素.offsetLeft

             * 

             * offsetTop

             *     作用

             *         找到元素最上边离最近的有定位父级之间的距离，不带单位，并且不带边框

             * 

             * 注意

             *         如果没有定位的父级，那默认是到html的距离

             *         遵循一个原则：1、给父级定位；2、一上来把默认样清掉

                             作用：提示层例子

 

1. <style>
2. div{
3. width:100px;
4. height:100px;
5. border:50px solid #f00;
6. margin:70px0070px;
7. }
8. body{
9. border:1px solid #f00;
10. }
11. #box2{
12. position: absolute;
13. }
14. </style>
15. <script>
16. window.onload=function(){
17. var box3=document.getElementById("box3");
18. console.log(box3.offsetLeft);//70
19. console.log(box3.offsetTop);//86
20. }
21. </script>
22. </head>
23. <body>
24. <div id="box1">box1
25. <div id="box2">box2
26. <div id="box3">box3</div>
27. </div>
28. </div>
29. </body>
30.  

12、getBoundingClientRect()

             *     作用

             *         获取到元素盒模型的一些信息，得到的结果是没有单位，不包含滚动条的距离

             *         width            宽度(包含边框)

             *         height            高度(包含边框)

             *         left                从元素的最左边到可视区的最左边距离

             *         right            从元素的最右边到可视区的最左边的距离

             *         top                从元素的最上边到可视区的最上边的距离

             *         bottom            从元素的最下边到可视区的最上边的距离

1. <style>
2. #box{
3. width:100px;
4. height:100px;
5. background:#f00;
6. position: absolute;
7. left:300px;
8. top:200px;
9. border:0px solid #000;
10. }
11. </style>
12. <div id="box"></div>
13. var box=document.getElementById("box");
15. console.log(box.getBoundingClientRect().width);//100

13、标签属性的操作

   1.getAttribute 

             *     用来获取元素的属性

             *     元素.getArrtibute(属性名)

             * 

             *     如果参数是一个src或者href的话，那它取到的结果就是引号里面的值（相对地址）

             *     它取不到js的自定义属性

             *     它可以取到html标签的自定义属性

1. window.onload=function(){
2. var box=document.getElementById("box");
3. var pic=document.getElementById("pic");
5. console.log(box.id);//box
6. console.log(pic['src']);//http://127.0.0.1:8020/javascript%E7%B2%BE%E5%93%81%E8%AF%BE%E7%A8%8B/%E7%AC%AC%E4%BA%94%E7%AB%A0/image/1.jpg
8. console.log(box.getAttribute('class'));//color
9. console.log(pic.getAttribute('src'));//image/1.jpg
11. box.index=1;
12. console.log(box.index);//1
13. console.log(box.getAttribute('index'));//null
15. console.log(box);
17. console.log(box.n);//undefined
18. console.log(box['n']);//undefined
20. console.log(box.getAttribute('n'));//kaivon
22. console.log(box['data-v']);//undefined
23. console.log(box.dataset.v);//haitang
24. }
25. </script>
26. </head>
27. <body>
28. <div id="box" n='kaivon' data-v="haitang"class="color">
29. <img id="pic" src="image/1.jpg"/>
30. </div>
31. </body>

        2.setAttribute

             *     设置属性

             *     元素.setAttribute(attr,value);

             *     两个参数必需同时出现

1. window.onload=function(){
2. var box=document.getElementById("box");
4. box.setAttribute('id','box2');
5. console.log(box);
7. box.setAttribute('n','海棠');
8. console.log(box);
10. box.setAttribute('style','200px;height:100px');
11. console.log(box);
12. }
13. </script>
14. </head>
15. <body>
16. <div id="box" n='kaivon' data-v="haitang"class="color" style=" 100px;">
17. <img id="pic" src="image/1.jpg"/>
18. </div>
19. </body>

        3.removeAttribute

             *     删除属性

             *     元素.removeAttribute(属性名)

1. <div id="box" n='kaivon' data-v="haitang"class="color" style=" 100px;"></div>
2. window.onload=function(){
3. var box=document.getElementById("box");
5. box.removeAttribute('n');
6. console.log(box);
7. };

14、获取元素的宽高

             *         元素.offsetWidth

             *             返回元素的宽度，包含边框的

             *         元素.clientWidth

             *             返回元素的宽度，不包含边框

             * 

             * 元素的高度

             *         元素.offsetHeight

             *             返回元素的高度，包含边框的

             *         元素.clientHeight

             *             返回元素的高度，不包含边框

15、可视区的宽高

        document.documentElement.clientWidth

        document.documentElement.clientHeight

                 作用：可以根据可视区的宽高减去元素的宽高除以2，使元素居中显示

16、creatElement

             *     作用

             *         创建元素：通过标签名的形式来创建一个元素

             *     语法

             *         document.createElement('tagName')

             *         createElement前面的主语只能document，其它的元素都没有这个方法

             *     参数

             *         标签名

             *     返回值

             *         返回创建的标签元素

             *     注意

             *         只能用来创建元素节点，不能创建文本、注释节点

             *         创建后的标签可以对它进行操作

17、appendChild

             *     作用

             *         添加元素：往父节点里在添加一个元素

             *         注意：它是添加到父节点的最后面

             *     语法

             *         父节点.appendChild(childNode)

             *     参数

             *         子元素，一般为用caeateElement创建后的节点

             *     返回值

             *         返回创建的那个标签元素

             *     注意

             *         只能添加标签节点，不能添加其它节点

1. window.onload=function(){
2. var btn=document.getElementById("btn");
4. btn.onclick=function(){
5. var div=document.createElement('div');
6. div.style.width='200px';
7. div.style.height='300px';
8. div.style.background='red';
10. var p=document.createElement('p');
11. p.innerHTML='这里是文字';
13. var a=document.body.appendChild(p);//返回值
14. console.log(a);//<p>这里是文字</p>
16. document.body.appendChild(div);
17. };
18. }
19. </script>
20. </head>
21. <body>
22. <input type="button" id="btn" value="创建元素"/>
23. </body>

18、insertBefore

             *     作用

             *         插入元素，把第一个参数插入到第二个参数的前面

             *     语法

             *         父级.insertBefore(childNode1,childNode2)

             *     参数

             *         childNode1            要插入的元素

             *         chilsNod2            决定childNod1插入的位置

             *         

             *         两个参数必需同时存在，否则就会报错

             *         第二个参数如果为null或者undefined的时候，insertBefore的作用相当于appedChild

             *     返回值

             *         返回要插入的那个元素（第一个参数）

1. window.onload=function(){
2. var ul=document.querySelector("ul");
3. var lis=document.querySelectorAll("li");
5. var newLi=document.createElement('li');
6. newLi.innerHTML='white';
8. ul.insertBefore(newLi,lis[2]);
10. var newLi2=document.createElement("li");
11. newLi2.innerHTML='black';
13. var result=ul.insertBefore(newLi2,lis[10]);//第二个位置不存在和没有写一样，都是appendChild的作用，在父级最后加
15. console.log(result);//<li>black</li>
17. }
18. </script>
19. <ul>
20. <li>red</li>
21. <li>green</li>
22. <li>blue</li>
23. <li>yellow</li>
24. <li>pink</li>
25. </ul>

19、removeChild

             *     作用

             *         移除元素，从父级里移除指定的元素

             *     语法

             *         父级.removeChild(childNode)

             *     参数

             *         要删除的子元素

             *     返回值

             *         返回被删除掉的那个元素

1. window.onload=function(){
2. var ul=document.querySelector("ul");
3. var lis=document.querySelectorAll("li");
5. var result=ul.removeChild(lis[2]);
7. console.log(result);//<li>blue</li>
9. };
10. </script>
11. <ul>
12. <li>red</li>
13. <li>green</li>
14. <li>blue</li>
15. <li>yellow</li>
16. <li>pink</li>
17. </ul>

20、replaceChild

             *     作用

             *         替换元素，用第一个参数替换第二个参数

             *     语法

             *         父级.replaceChild(node,childNode)

             *     参数

             *         node            要替换的元素

             *         childNode    被替换的元素

             *         两个参数必需同时出现，不然会报错

             * 

             *     返回值

             *         返回被替换的那个元素（第二个参数）

             * 

             *     注意

             *         如果用父级里的元素去替换另一个元素

             *         替换的那个元素会跑到被替换元素的位置

             *         被替换的那个元素会被删掉

1. window.onload=function(){
2. var ul=document.querySelector("ul");
3. var lis=document.querySelectorAll("li");
5. var newLi=document.createElement("li");
6. newLi.innerHTML='white';
8. var result=ul.replaceChild(newLi,lis[2]);
9. console.log(result);//<li>blue</li>
11. ul.replaceChild(lis[6],lis[0]);
12. //ul.replaceChild(lis[0]); //报错
13. };
14. </script>
15. <ul>
16. <li>red</li>
17. <li>green</li>
18. <li>blue</li>
19. <li>yellow</li>
20. <li>pink</li>
21. </ul>

 21、cloneNode

             *     作用

             *         克隆一个节点

             *     语法

             *         要克隆的节点.cloneNode(boolean)

             *     参数

             *         true            克隆元素和元素包含的子孙节点

             *         false               克隆元素但是不包含子孙节点

             *         如果不写参数的话，默认为false

             *         克隆只克隆html、css，js是不会被克隆的，如果克隆元素身上有js的功能，那克隆后的元素是不具备的

             *         如果克隆的元素本身有id，那克隆后的元素也会有id，两个就会重名，这样的话是不符合标准，手动去改一下id

             *     返回值

             *         返回被克隆的节点

1. window.onload=function(){
2. var box=document.getElementById("box");
3. var spans=document.querySelectorAll("span");
4. var divs=document.querySelectorAll("#box div");
6. //给每个span标签添加一个事件
7. for(var i=0;i<spans.length;i++){
8. spans[i].onclick=function(){
9. alert(this.innerHTML);
10. }
11. }
13. var newDiv=divs[0].cloneNode(false);
14. //var newDiv=divs[0].cloneNode(ture);
15. //var newDiv=divs[0].cloneNode();
16. console.log(newDiv);//<div style='color: #f00'></div>
17. box.appendChild(newDiv);
19. var blue=divs[2].cloneNode(true);
20. blue.id='blue1';
21. box.appendChild(blue);
23. console.log(blue);//<div id="blue1">blue</div>
24. };
25. </script>
26. <div id="box">
27. <div style='color: #f00'><span>red</span><span>green</span></div>
28. <div>yellow</div>
29. <div id="blue">blue</div>
30. <div>pink</div>
31. </div>

22、DOM操作的特性

  * appendChild/insertBefore/replaceChild在操作一个已有的元素时，是将已有的元素移动，而不是复制一份进行操作(剪切)

23、留言板例子 

1. window.onload=function(){
2. var text=document.getElementById("text");
3. var btn=document.getElementById("btn");
4. var list=document.getElementById("list");
6. btn.onclick=function(){
7. var val=text.value;
9. var li=document.createElement('li');
10. li.innerHTML=val;
12. //list.appendChild(li); //加杂在最后面
14. //list.insertBefore(li,list.children[0]); //加在最前面
15. list.insertBefore(li,list.firstElementChild);//加在最前面
17. //list.innerHTML+='<li>'+val+'</li>'; //加在最后面
18. };
19. };
20. </script>
21. </head>
22. <body>
23. <input type="text" id="text" value=""/>
24. <input type="button" id="btn" value="提交"/>
25. <ul id="list"></ul>

24、innerHTML与DOM操作的区别

             * innerHTML

             *     它会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已

             * DOM方法

             *     会把新的内容追加到原来的内容里面，原来内容所具有的事件，依然会在

  

1. window.onload=function(){
2. var color=document.getElementById("color");
3. var lis=document.getElementsByTagName("li");
5. for(var i=0;i<lis.length;i++){
6. lis[i].onclick=function(){
7. alert(this.innerHTML);
8. };
9. }
10. //innerHTML方法给color添加元素
11. //color.innerHTML+='<li>white</li>';
12. //这样上面的for循环以及点击事件就无效了，因为获取到的东西已经不存在了。
15. //DOM方法给color添加元素
16. var newLi=document.createElement("li");
17. newLi.innerHTML='white';
19. color.appendChild(newLi);
21. };
22. </script>
23. </head>
24. <body>
25. <ul id="color">
26. <li>red</li>
27. <li>green</li>
28. <li>blue</li>
29. <li>yellow</li>
30. <li>pink</li>
31. </ul>

25、动态获取元素以及静态获取元素的区别

             * getElementsByTagName（所有的get都是动态）

             *     动态获取元素，只要原来的结果有变化，这就能监听到，它会重新去获取一次元素，那这个时候原来的下标就变化了，变成新的下标                    了

             * 

             * querySlectorAll （所有的query都是静态）

             *     静态获取元素，只获取一次，会把下标存下来，即使原来的结构有变化，它也不会去重新获取

1. window.onload=function(){
2. var color=document.getElementById("color");
3. var lis=document.getElementsByTagName('li');
5. for(var i=0;i<lis.length;i++){
6. color.appendChild(lis[i]);
7. /*2yellow
8. 4pink
9. 1green
10. 5blue
11. 3red*/
12. //因为是用getElemntsByTagName,所以每一次的循环下标数都有变化
14. //如果是用querySelectAll公获取li的话，因为下标数已经定死了
15. /*1green
16. 2yellow
17. 3red
18. 4pink
19. 5blue*/
20. }
21. };
22. </script>
23. </head>
24. <body>
25. <ul id="color">
27. <li>2yellow</li>
29. <li>4pink</li>
31. <li>1green</li>
33. <li>5blue</li>
34. <li>3red</li>
35. </ul>

26、DOM操作表格

             * tbody

             *     表格中的tbody是可以不写的，在游览器解析的时候，会自动帮你加上

             *     建议大家写的时候要加上

             * 

             * 表格操作

             *     获取表格头

             *         表格.tHead

             *         返回整个表格头，thead里的所有内容

             *         注意：一个表格里只能有一个表格头

             * 

             *     获取表格主体

             *         表格.tBodies

             *         返回的是整个表格的主体内容，是一个数组

             * 

             *     获取表格底部

             *         表格.tFoot

             *         返回这个表格的底部，tfoot里的所有内容

             *         注意：一个表格只有一个tfoot

             * 

             *     获取表格行

             *         表格.rows/tHead.rows/tBodies.rows/tFoot.rows

             *         返回各自对应的行，是个数组

             *         注意：可以设置整个行的样式

             * 

             *     获取表格的单元格

             *         行.cells

             *         返回这一行的所有单元格，是个数组

             *         注意：它不能对整个单元格进行操作，只能取到某一个单元格进行操作

1. window.onload=function(){
2. var table=document.querySelector("table");
4. var head=table.tHead;
5. var tbody=table.tBodies;
6. var foot=table.tFoot;
9. head.style.background='red';
10. tbody[0].style.background='green';
11. foot.style.background='blue';
13. head.rows[0].style.color='#ccc';
14. tbody[0].rows[2].style.color='#f90';
15. foot.rows[0].style.color='#a9a';
17. head.rows[0].cells[0].style.fontSize='30px';
18. tbody[0].rows[0].cells[1].style.fontSize='40px';
19. foot.rows[0].cells[0].style.fontSize='50px';
20. };
21. </script>server.Sorryfor the inconvenience.
22. Please report this message and include the following information to us.
23. Thank you very much!
25. URL: http://www.wiz.cn/guidemap_sendimage.html?plat=x86&v=4.5.9.0&l=zh-cn&
26. Server: ay1405041044122256d3z
27. Date:2017/02/2708:33:44
28. Powered by Tengine
29. </head>
30. <body>
31. <table>
32. <thead>
33. <tr>
34. <th>编号</th>
35. <th>姓名</th>
36. <th>性别</th>
37. <th>年龄</th>
38. </tr>
39. </thead>
40. <tbody>
41. <tr>
42. <td>1</td>
43. <td>赵四</td>
44. <td>男</td>
45. <td>50</td>
46. </tr>
47. <tr>
48. <td>2</td>
49. <td>刘能</td>
50. <td>男</td>
51. <td>53</td>
52. </tr>
53. <tr>
54. <td>3</td>
55. <td>谢广坤</td>
56. <td>女</td>
57. <td>40</td>
58. </tr>
59. </tbody>
60. <tfoot>
61. <tr>
62. <td colspan="4">全是人</td>
63. </tr>
64. </tfoot>
65. </table>
66. </body>

27、DOM操作表单

             * 操作表单

             *     获取表单的值

             *         node.value

             *             input

             *             select

             *             textarea

             *     

             * 给每个表单都添加了一个name属性，用这个属性去获取到相应的表单元素

             * 

             * selectedIndex

             *     获取到下拉框里内容对应的索引值，它的索引值是默认添加上去的

             * 

             * oninput

             *     只要在输入框里输入内容的时候就会触发这个事件

             * 

             * onchange

             *     当下拉框里的内容有变化的时候就会触发这个事件

             * 

             * onsubmit

             *     当表单提交的时候会触发（点击submit按钮才能触发）

             *     表单.onsubmit

             * 

             * onreset

             *     当表单被重置的时候会触发（点击重置按钮才能触发）

             *     表单.onreset

             * 

             * 表单的方法

             *     表单.submit()        提交表单，会触发onsubmit事件
             *     表单.reset()            重置表单，会触发onreset事件

1. window.onload=function(){
2. var form=document.getElementById("form");
4. form.btn.onclick=function(){
5. console.log(form.username.value);//获取到输入框里的值
6. console.log(form.sex.value);//获取单先框的值
7. console.log(form.sel.value,form.sel.selectedIndex);//获取select框里的值
9. //获取到checkBox的值
10. //console.log(form.interest[0].value);
12. var arr=[];
14. for(var i=0;i<form.interest.length;i++){
15. if(form.interest[i].checked){
16. arr.push(form.interest[i].value);
17. }
18. }
20. console.log(arr);
21. };
23. form.username.oninput=function(){
24. console.log('你有输入内容了')
25. };
27. form.sel.onchange=function(){
28. console.log('你选择的内容有变化了');
29. };
31. form.onsubmit=function(){
32. alert('你的表单要被提交了');
33. };
34. form.onreset=function(){
35. alert('你的表单要被重置了');
36. };
38. form.send.onclick=function(){
39. //form.submit();
40. form.reset();
41. };
42. };
43. </script>
44. </head>
45. <body>
46. <form action="#" id="form">
47. <input type="text" name="username" value=""/>
48. <p>
49. 性别
50. <input type="radio" name="sex" value="男"/>男
51. <input type="radio" name="sex" value="女"/>女
52. </p>
53. <p>
54. 兴趣
55. <input type="checkbox" name="interest" value="吃饭"/>吃饭
56. <input type="checkbox" name="interest" value="睡觉"/>睡觉
57. <input type="checkbox" name="interest" value="打豆豆"/>打豆豆
58. </p>
59. <p>
60. 来自于
61. <select name="sel">
62. <option value="北京">北京</option>
63. <option value="上海">上海</option>
64. <option value="广州">广州</option>
65. </select>
66. </p>
67. <textarea name="text" rows="10" cols="30"></textarea>
69. <input type="button" name="btn" value="点击"/>
70. <input type="submit" name="sub" value="提交"/>
71. <input type="reset" name="res" value="重置"/>
72. <input type="button" name="send" value="发送"/>
73. </form>

            增加事件：  onmouseover     当鼠标放在上面

                                 onmouseout        当鼠标放开

通过样式该显示

xx.onclick=yy.onclick=function(){}

return  是否在作用于内是否有效果

 

null