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. TensorFlow object detection API

    cloud执行:https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/running_pet ...

  2. FreeRTOS如何结束和重新启动调度程序

    大多数主机或桌面系统(比如Linux,Mac或Windows)都有一个正常的用例,你可以在早上启动操作系统,然后在晚上关闭它,然后你就离开机器.嵌入式系统是不同的:他们没有参加,他们应该“永远”运行. ...

  3. Vue实例学习过程中碰到的小问题

    在使用插值表达式{{  }}取data中list数组中的值时把整个表达式当做文本显示了,原因不明,但是使用v-text替换插值表达式之后问题得到解决. 原因已经查明,因为第78行,定义对象car时后面 ...

  4. 3DMath

    线与面相交的计算 https://zh.wikipedia.org/wiki/%E7%BA%BF%E9%9D%A2%E4%BA%A4%E7%82%B9 什么是参数方程? 参数是参变数的简称.它是研究运 ...

  5. macos 命令行安装 ipa

    macos 命令行安装 ipa 苹果发神经后itunes已经无法在安装app了,如果有知道的兄弟可以告诉我啊 ideviceinstaller 使用这个开源项目可以在macos下安装app brew ...

  6. Python 实现auto linlink 连连看

    先上知乎上大神所写: 你看过/写过哪些有意思的代码? 然后别急着看blog,玩一把游戏再说! 看知乎评论,有人说他用了一个下午时间就写出来了. wo kao!!! 我断断续续写了一周的下午才搞定,然后 ...

  7. Anaconda的安装与使用

    1. 安装Anaconda(Command Line) 1.1 下载 首先去Anaconda官网查看下载链接,然后通过命令行下载: $ wget https://repo.anaconda.com/a ...

  8. 在无向图中找最短桥(tarjan)

    题目:hdu 4738 题目意思:  曹操有N个岛,这些岛用M座桥连接起来 每座桥有士兵把守(也可能没有) 周瑜想让这N个岛不连通,但只能炸掉一座桥 并且炸掉一座桥需要派出不小于守桥士兵数的人去 解题 ...

  9. php 缓存 加速缓存

    PHP四大加速缓存器opcache,apc,xcache,eAccelerator eAccelerator,xcache,opcache,apc(偏数据库缓存,分系统和用户缓存)是PHP缓存扩展, ...

  10. jmeter主要函数助手功用说明

    jmeter中虽然有很多的插件,但是有些需要安装,有些具有一定的局限性.函数助手是一个快捷的工具库.下面记录一下函数助手中一些主要的函数的使用方法. 注:不内容中所有的实例均基于3.2记录 1._Be ...