DOM编程

JavaScript | 2018-11-19 20:32:41 | 阅读 188 次 | 评论(2)

1.什么是DOM?

DOM[Document Object Model],文档对象模型。

DOM提供处理XML/HTML文档的API。

DOM的主要操作:节点的获取、节点的动态的创建、创建的删除及节点的替换。

节点(Node),在DOM树中所存在的任何一个元素(如HTML元素,文本、属性等)。

节点的类型

Node.ELEMENTNODE,1(元素类型)
Node.ATTRIBUTE
NODE,2(属性类型)
Node.TEXTNODE,3(文本类型)
Node.COMMENT
NODE,8(注释类型)
Node.DOCUMENT_NODE,9(文档类型)

2.document对象
属性

方法
getElementById()
描述:根据ID获取对象
语法:Element document.getElementById(string id)

createElement()

描述:创建元素节点

语法:Element document.createElement(string tagName)

createTextNode
描述:创建文本节点
语法:textNode document.createTextNode(string value)

createComment
描述:创建注释节点
语法:commentNode document.createComment(string value)

createAttribute
描述:创建属性节点
语法:attrNode document.createAttribute(string name)

3.Node接口

属性
firstChild
lastChild
nextSibling
previousSibling
parentNode
childNodes
nodeName
nodeType
nodeValue

方法
appendChild()
描述:追加子节点
语法:object.appendChild(node)

insertBefore()
描述:插入子节点
语法:object.insertBefore(newNode[,refNode])

removeChild()
描述:删除节点
语法:object.removeChild(node)

replaceChild()
描述:节点的替换
语法:object.replaceChild(newNode,oldNode)

DOM.png (上传于2018-11-19 20:32:41)
DOM.png

DOMTree.png (上传于2018-11-19 20:32:41)
DOMTree.png

Attr.png (上传于2018-11-19 20:32:41)
Attr.png

Document.png (上传于2018-11-19 20:32:41)
Document.png

DOM.jpg (上传于2018-11-19 20:32:41)
DOM.jpg

Element.png (上传于2018-11-19 20:32:41)
Element.png

HTMLDocument.png (上传于2018-11-19 20:32:41)
HTMLDocument.png

HTMLElement.png (上传于2018-11-19 20:32:41)
HTMLElement.png

Node.png (上传于2018-11-19 20:32:41)
Node.png

文章评论,共2条
Avatar
1楼: vasa 发表于 2018-11-28 13:40   回复
多谢大佬
Avatar
2楼: 平凡的生活 发表于 2018-11-28 15:18   回复
你好,我是出版编辑,最近策划技术类的书,有没有想法写本呢?

游客请输入验证码
最新评论