您的位置：首页 > Web前端 > JavaScript

js操作DOM常用方法

2015-09-10 16:21 639 查看

一、获取html元素

getElemnetById('id')、getElementsByName('name')、getElementsByTagName('span')。（IE[6-10]、FF、Chrome）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JAVASCRIPT DOM</title>
</head>
<body>
<span>CLICK</span><span id="node1">NODE1</span><span id="node2">NODE2</span>
<input type="checkbox" name="sex" />
<input type="checkbox" name="sex" />
<script>
console.log(document.getElementById('node1').innerHTML);/*NODE1*/
console.log(document.getElementsByTagName('span').length);/*3*/
console.log(document.getElementsByName('sex').length);/*2（注：通常用于input、radio、checkbox）*/
</script>
</body>
</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)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JAVASCRIPT DOM</title>
</head>
<body>
<script>
var div,txt,bd,span;
div=document.createElement('div');
div.id='mydiv';
div.className='yourdiv';
div.style.height='100px';
div.style.width='100px';
div.style.background="#00B0D4";
txt=document.createTextNode('Hello word');
div.appendChild(txt);
bd=document.getElementsByTagName('body')[0];
//bd.appendChild(div);
bd.insertBefore(div,document.getElementsByTagName('script')[0]);
span=document.createElement('span');
console.log(div.hasChildNodes());/*true*/
console.log(div.getAttribute('id'));/*mydiv*/
div.setAttribute('fv','1');
console.log(div.getAttribute('id'));/*mydiv*/
div.removeAttribute('fv');
</script>
</body>
</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）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JAVASCRIPT DOM</title>
</head>
<body>
<span>CLICK</span>
<span id="node1">NODE1</span>
<span id="node2">NODE2</span>
<script>
var nd=document.getElementById('node1');
console.log(nd.nextSibling.innerHTML);/*NODE2*/
console.log(nd.previousSibling.innerHTML);/*CLICK*/
</script>
</body>
</html>

innerHTML

style

attributes

click()

四、table方法

rows

caption

tBodies

tHead

createTHead()

createTFood()

createCaption()

deleteCaption()

deleteRow(pos)

deleteCell(pos)

insertRow(pos)

insertCell(pos)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航