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之前, ...
随机推荐
- [Ynoi2016]掉进兔子洞 题解
题面传送门:https://www.luogu.org/problemnew/show/P4688 (温馨提示,请直接翻至题目描述部分) 1e5的数据范围,以及对区间每个权值出现次数取min此类主席树 ...
- Linux基础:find命令总结
本文只总结一些常用的用法,更详细的说明见man find和 info find. find命令 find命令常用来查找文件或目录,可以根据给定的路径和表达式查找所需的文件或目录.该工具是由findut ...
- 在UEditor编辑器的工具栏上加一行文字
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- phpcms v9 邓士鹏(石家庄职业技术学院)
头部标题.关键词.描述调用: <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title'] ...
- netsh wlan set hostednetwork 之后如何删除掉 配置 及终端无法获取IP的解决方法
来源 微软 技术支持网站 仅仅禁用hostednetwork 是不行的,配置其实还在,彻底删除 配置可以按照如下操作进行: net stop wlansvcGet-ItemProperty " ...
- ZOJ 3362 Beer Problem
Beer Problem Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...
- 【ACM】hdu_zs3_1003_绝对值排序_201308100742
绝对值排序 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other)Total Submissi ...
- HDU 4500
哈哈,好爽好爽,刷水题报复社会啦... 哥这次省赛一定要拿一等奖,让你小看我,让你小看我.... #include <iostream> #include <cstdio> # ...
- event.currentTarget与event.target的差别介绍
event.currentTarget与event.target的差别想大家在使用的时候不是非常在意.本文以測试代码来解说它门之间的不同.即,event.currentTarget指向事件所绑定的元素 ...
- Codeforces Round #313 (Div. 2) 560D Equivalent Strings(dos)
D. Equivalent Strings time limit per test 2 seconds memory limit per test 256 megabytes input standa ...