Dom元素的操作
getElementById(): 获取有指定惟一ID属性值文档中的元素
getElementsByName(name): 返回的是数组
getElementsByTagName(): 返回具有指定标签名的元素子元素集合
getAttribute(): 返回指定属性名的属性值
1
|
document.getElementsByTagName( "a" )[0].getAttribute( "target" ); |
setAttribute(): 添加指定的属性,并为其赋指定的值。
1
|
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仅复制当前节点
Dom元素的操作的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- Ajax基础(四)--dom元素简单操作
1 //js对dom元素的操作 //添加dom元素 var param = document.createElement("p"); var node = document.cre ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS中对DOM元素的操作
https://www.runoob.com/jquery/jquery-ref-html.html 1.each 遍历 //遍历所有class为checksingle的DOM元素 $(" ...
- 前端dom元素的操作优化建议
参考自:http://blog.csdn.net/xuexiaodong009/article/details/51810252 其实在web开发中,单纯因为js导致性能问题的很少,主要都是因为DOM ...
- 返本求源——DOM元素的特性与属性
抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- react项目中对dom元素样式修改的另一种方法以及将组件插入到node节点中
在项目中,以前如果遇到对dom元素的操作都是直接获取dom元素,比如说: 但是如果修改的样式比较多的话,不如直接"切换"dom元素,如下例子: 这样会节省一些性能.因为操作dom的 ...
随机推荐
- POJ 1637 Sightseeing tour
Sightseeing tour Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9276 Accepted: 3924 ...
- [笔记]ng2的webpack配置
欢迎吐槽 前言 angular.cn教程中用的是systemjs加载器,那用webpack应该怎么配置呢?本文 demo: https://github.com/LeventZheng/angular ...
- [LeetCode] Island Perimeter 岛屿周长
You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...
- [LeetCode] Combination Sum 组合之和
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
- echart折线图小知识
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- sql server如何分组编号
我们在生产实践中经常会有这样的需求:分组编号. 如下有一个城市区域表region: 我们需要对上表region按city分组,对region进行排序,得到如下结果: 具体sql如下: select c ...
- UIDynamic--动力元素行为:UIDynamicItemBehavior
属性分析: @property (nonatomic, readonly, copy) NSArray* items; @property (readwrite, nonatomic) CGFloat ...
- [CodeIgniter] 在自定义类库中使用config配置项
通常情况下,Controller 中的方法可以通过 $this->config->item('item_name') 的方式来加载配置文件中的值 但是如果不继承 CI_Controller ...
- bzoj1078【SCOI2008】斜堆
题意: 斜堆(skew heap)是一种常用的数据结构.它也是二叉树,且满足与二叉堆相同的堆性质:每个非根结点的值都比它父亲大.因此在整棵斜堆中,根的值最小.但斜堆不必是平衡的,每个结点的左右儿子的大 ...