js操作DOM常用方法

一、获取html元素

  • getElemnetById('id')、getElementsByName('name')、getElementsByTagName('span')。（IE[6-10]、FF、Chrome）
  •  1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JAVASCRIPT DOM</title>
 6     </head>
 7     <body>
 8         <span>CLICK</span><span id="node1">NODE1</span><span id="node2">NODE2</span>
 9         <input type="checkbox" name="sex" />
10         <input type="checkbox" name="sex" />
11         <script>
12             console.log(document.getElementById('node1').innerHTML);/*NODE1*/
13             console.log(document.getElementsByTagName('span').length);/*3*/
14             console.log(document.getElementsByName('sex').length);/*2（注：通常用于input、radio、checkbox）*/
15         </script>
16     </body>
17 </html>

二、DOM方法

  • createElement('div')、createTextNode('')、appendChild(node)、removeChild(node)、replaceChild(newEl,oldEl)、cloneNode(boolean)
  • insetBefore(newEl,oldEl)、hasChildNodes()、getAttribute(name)、setAttribute(name,value)、removeAttribute(name)
  •  1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JAVASCRIPT DOM</title>
 6     </head>
 7     <body>
 8         <script>
 9             var div,txt,bd,span;
10             div=document.createElement('div');
11             div.id='mydiv';
12             div.className='yourdiv';
13             div.style.height='100px';
14             div.style.width='100px';
15             div.style.background="#00B0D4";
16             txt=document.createTextNode('Hello word');
17             div.appendChild(txt);
18             bd=document.getElementsByTagName('body')[0];
19             //bd.appendChild(div);
20             bd.insertBefore(div,document.getElementsByTagName('script')[0]);
21             span=document.createElement('span');
22             console.log(div.hasChildNodes());/*true*/
23             console.log(div.getAttribute('id'));/*mydiv*/
24             div.setAttribute('fv','1');
25             console.log(div.getAttribute('id'));/*mydiv*/
26             div.removeAttribute('fv');
27         </script>
28     </body>
29 </html>

     

三、DOM属性

  • nodeName
  • nodeValue
  • nodeType
节点类型 描述 子节点
1 Element 代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2 Attr 代表属性 Text, EntityReference
3 Text 代表元素或属性中的文本内容。 None
4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 None
5 EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6 Entity 代表实体。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7 ProcessingInstruction 代表处理指令。 None
8 Comment 代表注释。 None
9 Document 代表整个文档（DOM 树的根节点）。 Element, ProcessingInstruction, Comment, DocumentType
10 DocumentType 向为文档定义的实体提供接口 None
11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12 Notation 代表 DTD 中声明的符号。 None
  • childNodes
  • firstChild
  • lastChild
  • parentNode
  • nextSibling，previousSibling。（IE[6-10]、FF、Chrome）
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JAVASCRIPT DOM</title>
 6     </head>
 7     <body>
 8         <span>CLICK</span>
 9         <span id="node1">NODE1</span>
10         <span id="node2">NODE2</span>
11         <script>
12             var nd=document.getElementById('node1');
13             console.log(nd.nextSibling.innerHTML);/*NODE2*/
14             console.log(nd.previousSibling.innerHTML);/*CLICK*/
15         </script>
16     </body>
17 </html>
  • innerHTML
  • style
  • attributes
  • click()

四、table方法

  • rows
  • caption
  • tBodies
  • tHead
  • createTHead()
  • createTFood()
  • createCaption()
  • deleteCaption()
  • deleteRow(pos)
  • deleteCell(pos)
  • insertRow(pos)
  • insertCell(pos)
posted @ 2015-09-10 16:21  lifeis_ok  阅读(415)  评论(0)    收藏  举报