JS文档DOM

访问指定节点 |
|||
通过document节点获取 | document.getElementById(elementId) | ||
document.getElementsByName(elementName) | document.getElementsByName('radiogroup1')[0] | 该方法的返回值是一个数组,若要获取,可以通过返回数组中下标值进行获取 | |
document.getElementsByTagName(tagName) | var a=document.getElementsByTagName("a")[0]; | 该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组 | |
document.getElementsByClassName(ClassName) |
<body id="myid" class="mystyle"> <script type="text/javascript"> x=document.getElementsByTagName('body')[0]; document.write("Body CSS class: " + |
className 属性设置或返回元素的 class 属性。 |
|
通过父节点获取![]() |
parentObj.firstChild | 如果节点为已知节点 (parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持 parentObj.firstChild.firstChild.firstChild...的形式 | |
parentObj.lastChild | 获取已知节点(parentObj)的最后一个子节点 | ||
parentObj.childNodes | 获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。 注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。 |
||
parentObj.children | 获取已知节点的直接子节点数组。 注意:经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。 |
||
parentObj.getElementsByTagName(tagName) | 返回已知节点的所有子节点中类型为指定值的子节点数组。例 如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。 | ||
通过临近节点获取 | neighbourNode.previousSibling | 获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。 | |
neighbourNode.nextSibling | 获取已知节点(neighbourNode)的下一个节点 | ||
通过子节点获取 | childNode.parentNode | 获取已知节点的父节点 | |
查看修改属性节点 |
|||
getAttribute | ![]() |
||
setAttribute | |||
克隆节点 |
|||
newElement oldElement.cloneNode(bool deep); | 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只可能这个节点本身。 返回值就是一个克隆的节点newElement。 |
|
![]() |
创建节点 |
|||
createElement("p") | 这段代码创建新的 <p> 元素(如需向 <p> 元素添加文本,您必须首先创建文本节点) | ||
createTextNode("这是新段落。") | 这段代码创建了一个文本节点 | ||
para.appendChild(node) | 向 <p> 元素追加这个文本节点 | ||
var element=document.getElementById("div1"); element.appendChild(para); |
向一个已有的元素追加这个新元素 | ||
删除 |
|||
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
|
如果能够在不引用父元素的情况下删除某个元素,就太好了。 不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。 这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素: |
var child=document.getElementById("p1"); child.parentNode.removeChild(child); |
在js中三种改变样式的方法
b1.onclick=function() {
d1.className='change';
}//用于为DOM元素直接添加样式类
b2.onclick=function() {
d1.style.color='red';
}
//用于为DOM元素添加样式值b3.onclick=function() {
d1.style.cssText='color: yellow; border: 3px double green; width: 300px; height: 300px;';
}
用于为DOM元素一次添加多个样式值
JS文档DOM的更多相关文章
- gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
- 使用node.js 文档里的方法写一个web服务器
刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...
- JavaEE实战——XML文档DOM、SAX、STAX解析方式详解
原 JavaEE实战--XML文档DOM.SAX.STAX解析方式详解 2016年06月22日 23:10:35 李春春_ 阅读数:3445 标签: DOMSAXSTAXJAXPXML Pull 更多 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- JS文档生成工具:JSDoc 介绍
JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...
- java解析xml文档(dom)
DOM解析XML文档 读取本地的xml文件,通过DOM进行解析,DOM解析的特点就是把整个xml文件装载入内存中,形成一颗DOM树形结构,树结构是方便遍历和和操纵. DOM解析的特性就是读取xml文件 ...
- JS文档和Demo自动化生成工具 - SmartDoc发布
曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...
- 使用YUIDoc生成JS文档
其实YUIDoc主页已经写的比较清晰了,但有一些概念和细节再点出一些注意的地方. 目前最新的YUIDoc使用nodejs进行开发安装和使用都非常的方便. 我们只需要将我们的代码加上必要的注释,便可以很 ...
- 笔记:XML-解析文档-DOM
要处理XML文档,就要先解析(parse)他,解析器时这样一个程序,读入一个文件,确认整个文件具有正确的格式,然后将其分解成各种元素,使得程序员能够访问这些元素,Java库提供了两种XML解析器: 像 ...
随机推荐
- ELK平台介绍
在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段: 以下内容来自:http://baidu.blog.51cto.com/71938/1676798 日志主要包括系统日志.应用程序日志和安全 ...
- centos7.2启动级别
systemctl set-default multi-user.target 设定默认为字符界面,也就是3 systemctl set-default graphical.target ...
- postgresql----数据库表约束----NOT NULL,DEFAULT,CHECK
数据库表有NOT NULL,DEFAULT,CHECK,UNIQUE,PRIMARY KEY,FOREIGN KEY六种约束. 一.NOT NULL ---- 非空约束 NULL表示没有数据,不表示具 ...
- lunux系统安全
1.清除不必要的系统帐户 [root@deep]# userdel adm [root@deep]# userdel lp [root@deep]# userdel sync [root@deep]# ...
- Hadoop生态上几个技术的解释:hive、pig、hbase 关系与区别
hadoop生态圈 Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的维护之后将它开源贡献到开源社区由所有爱好者来维护.不过现在还是 ...
- CH1807 Necklace【Hash】【字符串】【最小表示法】
1807 Necklace 0x18「基本数据结构」练习 背景 有一天,袁☆同学绵了一条价值连城宝石项链,但是,一个严重的问题是,他竟然忘记了项链的主人是谁!在得知此事后,很多人向☆同学发来了很多邮件 ...
- Oracle等待事件之db file scattered read
1.产生原因 该等待事件通常发生在数据库多块读时,表示发生了与全表扫描和快速索引扫描相关的等待.通常意味着全表扫描过多,或者I/O 能力不足,或者I/O 竞争. 2.确定产生问题对象方法 a)查找全表 ...
- Tomcat 系统架构
https://www.ibm.com/developerworks/cn/java/j-lo-tomcat1/index.html 2010 年 5 月 20 日发布 本文以 Tomcat 5 为基 ...
- Nginx正向代理配置
服务器端: server { resolver 8.8.8.8; resolver_timeout 5s; listen 0.0.0.0:8888; access_log /usr/local/ngi ...
- 大规模Docker平台自动化监控之路
本文介绍了通过Monitor,如何实现大规模容器运维平台的自动化监控需求. 尽管Docker技术目前还处于不稳定的发展与标准制定阶段,但这门技术已经呈现了极其火热的增长状态,却已经是不争的实事.到底有 ...