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 ...
随机推荐
- 初学python之路-day12
本篇补上字符串的比较:按照从左往右比较每一个字符,通过字符对应的ascii进行比较 一.函数默认值的细节 # 如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值 a ...
- gradle 编译kafka源码慢
我前提已经在环境变量中将GRADLE_HOME设置到了gradle的目录(在E盘),并且在环境变量里设置了本地仓库GRADLE_USER_HOME. 编译kafka源码时候,很慢很慢.百度了一下,有说 ...
- 2018-2019-2 网络对抗技术 20165328 Exp2 后门原理与实践
实验内容: 任务一:使用netcat获取主机操作Shell,cron启动任务二:使用socat获取主机操作Shell, 任务计划启动任务三:使用MSF meterpreter(或其他软件)生成可执行文 ...
- 认识uWSGI、uwsgi、wsgi
WSGI协议 首先弄清下面几个概念: WSGI:全称是Web Server Gateway Interface,WSGI不是服务器,python模块,框架,API或者任何软件,只是一种规范,描述web ...
- Very Long Suffix Array
题解: 原来动态开点平衡树是O(n)空间的.. 只需要在split的查找和出来之后动态开点就可以了 这题的结论是2^(b[a[i]+1]>b[a[i+1]+1]的个数) 前60分是普通的平衡树操 ...
- Service Fabric是什么?
题记:鉴于社区对Service Fabric有诸多误解,希望借本文能让大家正确了解Service Fabric是一个什么东西,算是给其正名. 术语与分类 Service Fabric不仅仅是容器编排器 ...
- html_javascript
js:放在bady标签的底部,保证页面加载完成后才加载js js注释:// 单行注释 /*多行注释*/ js有两种存在形式: 以文件的形式存在,使用时引用在head标签里<script src= ...
- 调整登录会话和资源限制,bash和csh的ulimit设置方法
查看软限制和硬限制 要查看会话中的软限制设置,请运行: 对于csh: % limit 对于bash: $ ulimit -a 下面的输出样本显示了PFE上的软限制设置. 对于csh: % limit ...
- shiro(四)项目开发中的配置、
配置拦截.过滤.验证请求 <!-- shiro --> <!-- 項目自定义的Realm --> <bean id="ShiroRealm" clas ...
- 期末Java Web大作业----简易的学生管理系统
学生信息管理系统(大作业) 2018-12-21:此文章已在我的网站更新,添加视图介绍等信息,源码请移步下载https://www.jeson.xin/javaweb-sims.html PS:首先不 ...