JS操作DOM的一些常用方法
getElementById():获取有指定惟一ID属性值文档中的元素
getElementsByName(name):返回的是数组
getElementsByTagName():返回具有指定标签名的元素子元素集合
getAttribute():返回指定属性名的属性值
document.getElementsByTagName("a")[0].getAttribute("target");
setAttribute():添加指定的属性,并为其赋指定的值。
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
节点属性:
节点名称(只读):nodeName
节点值: nodeValue
节点类型(只读):nodeType
子节点:
ele.childNodes 返回数组
firstChild
lastChild
父节点
parentNode 只有一个
兄弟节点
nextSibling 某节点之后紧跟的节点
previousSibling
插入节点
appendChild() 插入在最后
insertBefore(newnode,node)在node节点之前
删除节点
removeChild(node) 成功返回被删除的节点 失败返回null
替换元素节点
replaceChild(newnode,oldnode) 实现子节点对象的替换
创建元素节点
createElement()
创建文本节点
createTextNode()
复制节点
需要被复制的节点.cloneNode(true/false)
true复制当前节点极其所以子节点,false仅复制当前节点
JS操作DOM的一些常用方法的更多相关文章
- 【JavaScript实用技巧(二)】Js操作DOM(由问题引发的文章改版,新人大佬都可)
[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS操作DOM常用API总结
<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JS操作DOM对象——JS基础知识(四)
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- [总结]JS操作DOM常用API详解
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
随机推荐
- 数据类型---->Number
Javascript中有六种数据类型 1.undefined:这个值未定义 2.boolean:这个值是布尔值 3.number:这个值是数值 4.function:这个值是函数 5.object:这 ...
- CF135E Weak Subsequence (计数问题)
题目传送门 题目大意:对于给定字符集大小k,求有多少个字符串满足它的最长[既是子串又是弱子序列]的长度为w: 神仙计数题 打表发现,对于字符串S而言,它的最长[既是子串又是弱子序列],一定存在一个对应 ...
- 3.SpringBoot整合Thymeleaf模板
一.前言 SrpingBoot支持如JSP.Thymeleaf.FreeMarker.Mustache.Velocity等各种模板引擎,同时还为开发者提供了自定义模板扩展的支持. 使用嵌入式Servl ...
- js简单自定义事件与主动触发事件
var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...
- LInux下实时网络流量监控工具nload教程
https://jingyan.baidu.com/article/642c9d340cbef0644a46f72a.html http://blog.csdn.net/u014171641/arti ...
- Eclipse在Project Explorer项目归组及分模块显示
普通项目: 1.[Package Explorer]->[filter]->[Top Level Elements]->[Working Sets] 2.[Package Explo ...
- pl/sql developer 自带汉化选项
pl/sql developer 自带汉化选项 版本:11.0.2 工具 -> 选项 -> 用户界面 ->外观, 第一项就是选择语言: 选择Chinese.lang,如果有的话:
- Github Pages 建立过程记录
之前建立过一个測试页面. 如今在折腾CreateJS 试着把离线版的文档传到github pages上面. 第一步:创建Repository 第二步:本地初始化 主要命令:git init 第三步:复 ...
- 【网络协议】ICMP协议、Ping、Traceroute
ICMP协议 ICMP常常被觉得是IP层的一个组成部分,它是网络层的一个协议.它传递差错报文以及其它须要注意的信息.ICMP报文通常被IP层或更高层(TCP.UDP等)使用,它是在IP数据报内 ...
- map-reduce入门
map-reduce入门 近期在改写mahout源代码,感觉自己map-reduce功力不够深厚,因此打算系统学习一下. map-reduce事实上是一种编程范式,从统计词频(wordCount)程序 ...