城东小巷分享 http://blog.sciencenet.cn/u/chengdong166

博文

DOM学习小结(一)

已有 2944 次阅读 2012-7-18 23:08 |个人分类:JS学习|系统分类:科研笔记| Javascript, DOM

DOM小结:

1.       访问文档中的元素

1)      document.getElementById(‘id’);

2)      document.getElementsByTagName(‘tagName’).

2.       读取元素的属性、节点值及其它节点数据

1)      node.getAttribute(‘attribute’):获取属性名为attribute的值;

2)      node.setAttribute(‘attribute’, ‘value’):设置属性名为attribute的值为value

3)      node.nodeType:读取节点类型(1=元素,3=文本接节点);

4)      node.nodeName:读取节点名称(元素名字或#textNode);

5)      node.nodeValue:读取或设置节点的值(文本节点的情况下则为文本内容,元素为null

3.       节点之间的操作

1)      node.previousSibling:获取上一个兄弟节点,并将它保存为一个对象;

2)      node.nextSibling:获取下一个兄弟节点,并将它保存为一个对象;

3)      node.childNodes:获取对象的所有子节点,并把它们存储到一个列表中。对于第一个和最后一个子节点,还可以使用node.firstChildnode.lastChild进行简写;

4)      node.parentNode:获取包含node的节点;

5) node.hasChildNodes():判断node是否有孩子节点。

4.       创建新节点

1)      document.creteElement(‘element’):创建一个标签名为element的新元素;

2)      document.createTextNode(‘string’):创建一个节点值为string的文本节点;

3)      document.appendChild(newNode):将newNode作为子节点,添加在node的所有子节点之后。

4)      newNode = node.cloneNode(bool):创建newNode节点作为node的克隆。如果bool值为true,这个克隆就包括所有原节点的子节点及其属性的克隆。

5)      node.insertBefore(newNode.oldNode):把newNode作为一个node的新节点插入到oldNode之前。

6)      ndoe.removeChild(oldNode):移除node节点的子节点。

7)      node.replaceChild(newNode,oldNode):使用节点newNode替换node节点的子节点oldNode

8)      element.innerHTML:读写给定elementHTML内容,他是一个字符串,包括所有子节点及它们的属性和文本内容。

注意:前两种方法都是document的方法,所有其它的都是节点的方法。

关于JavaScript的DOM操作与jQuery的DOM操作比较,将会在接下来的学习中慢慢总结!



https://blog.sciencenet.cn/blog-448935-593534.html

上一篇:JavaScript创建类和对象——学习笔记(一)
下一篇:JSON in JavaScript Learning
收藏 IP: 122.82.76.*| 热度|

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-6-2 21:46

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部