Javascript学习二---DOM元素操作
Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法。

1 获取元素的方法
获取元素方法:
- 通过ID:document.getElementById(); 一个
- 通过标签:父级.getElementsByTagName();
- 通过class:父级.getElementsByClassName(); IE8及以下不支持
- 通过css选择器:
父级.querySelector(); 一个 IE7及以下不支持
父级.querySelectorAll();
2 创建新节点
- createDocumentFragment() //创建一个DOM片段
- createElement() //创建一个具体的元素
- createTextNode() //创建一个文本节点
3 添加删除替换插入节点 // 添加、移除、替换、插入
- appendChild()
- removeChild()
- replaceChild()
- insertBefore() //在已有的子节点前插入一个新的子节点
4 元素样式:
元素.currentStyle.样式名 返回的值有单位 IE支持
window.getComputedStyle(元素).样式名 返回的值有单位 标准浏览器支持(IE9及以上支持)
(获取元素样式兼容)
// 参数:元素, 样式名, 返回带单位样式值
function getStyle(obj, attr) {
if (typeof(getComputedStyle) === 'function') {
// 标准浏览器(IE9及以上)
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
Javascript学习二---DOM元素操作的更多相关文章
- 深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- dom元素操作(动态事件绑定)
遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- jquery学习笔记(二):DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
- 7. JavaScript学习笔记——DOM
7. DOM 7.1 DOM简介 DOM是文档对象模型,HTML文档的所有内容都是节点: 整个文档是一个文档节点 (document 最顶级) HTML元素内的文本是文本节点 每个表面的属性是属性节点 ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
随机推荐
- linux指令(1)
1) date: 日期与秒的转换 (seconds since 1970-01-01 00:00:00 UTC) [root@laas:~]# date --date=2019-12-31 +%s15 ...
- (转)理解CPU steal time
转自:https://www.cnblogs.com/menkeyi/p/6732020.html Netflix 很关注CPU的Steal Time.他们的策略是:如果是当前虚拟机的Steal Ti ...
- XV Open Cup named after E.V. Pankratiev. GP of Siberia-Swimming
给出两个点,找到过这两个点的等角螺线,并求出中间的螺线长 $c = \frac{b}{a}$ $p = a \times c^{\frac{\theta}{angle}}$ 对弧线积分 #includ ...
- sql获取当前月份的前一月,当前天的前一天,当前年的前一年
当前年份加减: SELECT CONVERT(varchar(12),DATEADD(year,1,GETDATE()),23) as year SELECT CONVERT(varchar(12), ...
- Matlab-6:解非线性方程组newton迭代法
函数文件: function x=newton_Iterative_method(f,n,Initial) x0=Initial; tol=1e-11; x1=x0-Jacobian(f,n,x0)\ ...
- Linux下通过vi修改只读文件
打开一个只读文件 $ vi /etc/crontab 此时会进入crontab的编辑界面,通过按键 ESC 可以进入命令模式,按键 I 进入插入模式 但是!如果此时没有权限进行修改的话,虽然可以插入编 ...
- 【转】SQL数据库日志文件收缩
USE [master] GO ALTER DATABASE MDM_OperationBase SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE ...
- 此博客不再更新和分享UiPath文章
由于版权问题,将不再分享我的笔记 警告:任何人不得拷贝及挪用我的uipath笔记作为商业用途,一旦发现,立刻发律师函,请知悉及慎重!!!!
- c++中各类型数据所占字节数(二)
转自:https://blog.csdn.net/allen_tony/article/details/76973906 https://blog.csdn.net/zzwdkxx/article/d ...
- linux常用命令 命令管道符
多命令顺序执行 多命令顺序执行 多命令执行符 格式 作用 : 命令1:命令2 多个命令顺序执行,命令之间没有任何逻辑联系 && 命令1&&命令2 逻辑与 当命令1正确执 ...