js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型
nodeType返回值
1:元素节点
2:属性节点
3:文本节点
8:注释节点
9: 文档节点
nodeName 节点名称
nodeType 节点类型
nodeValue 节点值
setAttribute("属性名","属性值")
getAttribute("属性名") 根据属性名获取对应的属性值
getAttributeNode("属性名") 获取的是属性节点
createElement() 新增节点
insertBefore(newLi,li) 把newLi放在li之前
replaceChild(newLi,li)把newLi替换li的位置
removeChild()删除指定的子节点
parentNode 获取父节点
appenChild()追加子节点
通过js中的style属性可以为节点动态的增加css样式
style.属性名
之前css的属性名 background-color
现在属性名 backgroundColor
className用来动态的给节点设置class属性!
tabs选项卡功能的实现
offsetLeft 返回元素左边距 到 父级的左边距
offsetTop 返回元素上边距 到 父级的上边距
offsetHeight 元素的高度
offsetWidth 元素的宽度
offsetParent 返回元素的父级容器
scrollTop 滚动条的垂直距离
scrollLeft 滚动条的水平距离
clientWidth 返回元素可见宽度
clientHeight 返回元素可见高度
js操作DOM对象的更多相关文章
- JS操作DOM对象——JS基础知识(四)
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- jQuery对象与JS原生dom对象之间的转换
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...
- javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- js的dom对象(带实例超详细全解)
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
- 前端之JavaScript:JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
随机推荐
- A - Alice's Print Service ZOJ - 3726 (二分)
Alice is providing print service, while the pricing doesn't seem to be reasonable, so people using h ...
- jupyter4.4.0自定义目录
百度是有技巧的,现在百度的基本上都是2年前的帖子,对于最新的版本都不适用 对于jupyter自定义目录都是修改配置文件,这个对于jupyter4.4.0不适用: 1.在桌面创建jupyter-note ...
- 20175226 2018-2019-2《java程序设计》结对编程-四则运算(第一周-阶段总结)
结对编程-四则运算(第一周-阶段总结) 需求分析 实现一个四则运算程序,要求: 自动随机生成小学四则运算题目(加,减,乘,除) 支持整数.真分数且支持多项式 能够利用栈的思想,将中缀转换为后缀表达式 ...
- 跨域资源共享(CORS)
同源策略 同源策略是浏览器的一个安全策略,只允许当前页面或当前域下发送请求,如果向其他域发送请求,会被浏览器拦截 同源的意思:协议.IP地址.端口三者一致,浏览器才会认为是同一个域,三者中有一个不一致 ...
- iOS 仿抖音 视频裁剪
1.最近做短视频拍摄.其中的裁剪界面要做得和抖音的视频裁剪效果一样 需求: 裁剪有一个最大裁剪时间.最小裁剪时间.左右拖动可以实时查看对应的视频画面.拖动进度条也能查看对应的画面 .拖动底部视图也能 ...
- 【原创精品】mac 彻底卸载趋势科技
在公司,给我的mac 笔电装了公司的查杀毒软件,此后,这货就像挥之不去的病毒,就像你心理上阴影一样如影随形,最邻人方案的是这货没界面,只是个后台服务,一般人就没办法了.最最令人反感的是它经常控制/拖慢 ...
- Zabbix (三)
一.zabbix支持的主要监控方式: zabbix主要Agent,Trapper,SNMP,JMX,IPMI这几种监控方式,本文章主要通过监控理论和实际操作测试等方式来简单介绍这几种方式的监控原理和优 ...
- Bootstrap模态框垂直高度居中问题
Bootstrap对话框改变其默认宽高,高度不会自适应居中.为解决这个问题,最好的方式是能够通过css来解决,试了几种网上的方案发现都不行.然后想到可以通过js来修正,什么时候修正最好?于是想到可以注 ...
- Centos安装Consul微服务
一.简介 Consul([ˈkɒnsl],康搜)是注册中心,服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离.除了Consul之外,还有Eureka.Zoo ...
- sqlserver 删除表 视图 函数 存储过程
use tax_ceshiselect 'DROP TABLE '+name from sysobjects where type = 'U'union select 'DROP VIEW '+nam ...