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的 ...
随机推荐
- float4与half4数据类型
连续4个32位float类型数的向量 HLSL数据类型 GPU是以四维向量为基本单位来计算的.4个浮点数所组成的float4向量是GPU内置的最基本类型.使用GPU对两个float4向量进行计算,与C ...
- Could not load type 'System.Web.Mvc.ViewPage<dynamic>' in asp.net mvc2 after publishing the website
在WebConfig里 找到 <pages></pages> <pages pageParserFilterType="System.Web.Mvc.ViewT ...
- [LeetCode] Department Top Three Salaries 系里前三高薪水
The Employee table holds all employees. Every employee has an Id, and there is also a column for the ...
- Netty学习笔记之一(Netty解析简单的Http Post Json 请求)
一,HTTP解码器可能会将一个HTTP请求解析成多个消息对象. ch.pipeline().addLast(new HttpServerCodec()); ch.pipeline().addLast( ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
- C语言学习 第十次作业总结
同学们终于学到最有意思的东西:指针了.有人说指针是C语言的灵魂.虽然有点夸大,但是事实的确是如此.很多的时候,使用指针,会让过程变得简洁和精巧.这个在以后同学们深入学习使用C语言进行编程的时候就可以理 ...
- C语言学习 第八次作业总结
本次作业其实没有新的内容,主要就是复习上一次的一维数组的相关内容.冯老师布置了5道题目,其中涉及到一些比较简单的排序或者是查找的方法.因为数据很少,所以直接使用for循环遍历就可以了. 关于本次作业, ...
- web前端面试试题总结---html篇
HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...
- jquery基本操作笔记
来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...
- layer.open打开iframe页面的调用父页面方法及关闭
//调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面var index = ...