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对象的更多相关文章

  1. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  2. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  3. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  4. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  6. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  7. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  8. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  9. 前端之JavaScript：JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...

随机推荐

  1. python使用正则解析网络地址的各个部分

    参考文章: https://www.cnblogs.com/ingd/p/6182571.htmlimport re def resolveAddress(url): ""&quo ...

  2. spring security5.0源码导入idea

    资源路径:链接:https://pan.baidu.com/s/1Xep6hzyIF2a0AtFYDeO_bw提取码:6af8 1.解压源码 2.编译源码     windows下:直接双击gradl ...

  3. TP5多模块开发

    一般的thinkphp框架一般都是单模块开发的,但有时候我们可能需要进行多模块开发,例如添加个后台管理的模块.这次给人讲课,在Tp多模块开发的配置上翻车,感觉很有必要总结下,话不多说,直接上干货. 总 ...

  4. Android6.0以上系统动态获取权限

    动态权限的申请方法: 1.首先,需要在AndroidManifest.xml静态申请权限,否则无法动态申请权限: <uses-permission android:name="andr ...

  5. 关联管理器(RelatedManager)

    一.class RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况: 1.一对多 ForeignKey关系的“另一边” ...

  6. CocosCreator脚本中向依赖的组件赋值后, 被依赖的组件没有取到值的问题!

    问题描述: 两个节点parent&child(其中都包含脚本组件), parent脚本组件依赖了child组件, 节点关系如下图: parent脚本内容如下: child脚本内容如下: 预览时 ...

  7. 论文阅读笔记四十八：Bounding Box Regression with Uncertainty for Accurate Object Detection(CVPR2019)

    论文原址:https://arxiv.org/pdf/1809.08545.pdf github:https://github.com/yihui-he/KL-Loss 摘要 大规模的目标检测数据集在 ...

  8. linux常用命令及使用技巧(二)

    ls显示指定工作目录下的内容,同windows中的dir命令 pwd命令显示当前工作目录 date命令,显示或修改系统时间与日期 passwd命令,设置用户密码 su命令改变用户身份 clear命令, ...

  9. qqluxc

    因为现在noi/noip都是无限栈 noi-linux开栈指令 ulimit -s 102400 这个是100mb 平衡树*2 维护序列 翻转 平衡树+1 维护区间+* t了3个点.. 注意打完标记 ...

  10. 身份证号验证js程序

    最近注册一个网站,居然让我输入个人身份证号,身份证号是个人信息,怎么能告诉你呢? 输入正确的身份证号没有任何问题. 我就仅仅改了最后一位,就告诉我身份证号不对,你是怎么知道的呢?所以,搜了下身份证号的 ...