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. webpack4学习笔记

    执行webpack-dev-server的时候不会自动生成dist打包目录,怪不得公司的项目里面都没用到webpack-dev-server呢 执行webpack的时候会生成dist目录 watch的 ...

  2. C++入门篇十三

    常对象: const  Person p1; 不可以调用普通成员函数,除非前面加了函数前面加了const可以调用常函数在对象之前加入const修饰 const Person p1; 常函数:void ...

  3. C++入门篇十一

    单例对象:为了让类只有一个实例,实例不需要自己释放掉 不管创建多少个实例对象进行访问,访问的都是同一个值 #include "pch.h" #include <iostrea ...

  4. Java - day002 - 运算符,位运算,流程控制

    1 运算符 +-*/               (+)   既是数学运算 ,也是 字符串链接 %                  求余  /  求模  (进口大麻袋) ==             ...

  5. ubuntu 下php + nginx

    location ~ \.php$ { fastcgi_split_path_info ^(.+\.php)(/.+)$; root /home/roger/uicode/pcp_web; # # N ...

  6. MiniGUI 如何显示繁体字

    有两种编码格式都可以显示繁体字,一种是GBK,一种是BIG5: 由于MiniGUI官方提供的字库的字体大小太小,所以只得自己去做字库,我用一个字库生成软件,分别做了一个GBK编码的字库和一个BIG5编 ...

  7. Net Framework 4.7.2 覆盖 Net Framework 4.5 解决办法

    场景:由于c盘空间不够,本机pc又安装了 vs2013 和 vs2017 : 所以通过,github上的一个工具,把vs2013 卸载完毕,只留下vs2017: 导致问题由于项目需要net frame ...

  8. 在SOUI中使用动态多语言切换

    动态语言切换是很多国际化产品的需求,SOUI之前的版本支持静态多语言翻译,通过在程序启动时设置好语言翻译模块,在程序中打开的UI都会自动调用该翻译模块进行文字翻译,但是不支持运行进语言切换. 最近几个 ...

  9. HTTP/2部署使用

    为了更好地研究HTTP2的一些新特性,或者有小伙伴想让自己的站点支持HTTP2的请求,以提升访问性能……无论出于什么目的,我们都有必要尝试将HTTP2部署使用. 而刚好,我们前一段时间在做HTTP2的 ...

  10. python常见的函数和类方法

    在学python编程时 常常会遇到些常见的函数 记录学习 1. getattr函数 """ getattr() 函数用于返回一个对象属性值. 语法: getattr(ob ...