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. js 字符串切割

    对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() ...

  2. 团队软件的NABCD——星遇

    日期:2019.4.17 博客期:053 星期三 我们项目是个面向希望有新奇体验的用户的社交软件,致力于打造不一样的有趣的社交. N:(Need,需求) 目前主流社交软件由于时间原因体量越来越大,各种 ...

  3. EF Core 2.2 对多个 DbContext 单个数据库的情况进行迁移的示例

    目录 场景 创建新项目 创建第一个模型 创建第二个模型 使用依赖注入注册上下文 创建数据库 需要注意的情况 场景 在一个项目中,使用了多个 DbContext 且使用同一个数据库的情况 创建新项目 打 ...

  4. jdk1.7更新visualvm插件

    所有的插件全部更新到hithub上 https://visualvm.github.io/pluginscenters.html 然后,在根据不同的JDK版本选择不同的插件地址.更改VisualVM插 ...

  5. 基于docker/dockerfile实现redis主从复制

    今天我们来搭建基于docker实现redis主从复制集群 为什么要使用redis集群模式? Redis可以说是内存数据库,mysql的数据库是真实存储在硬盘里的,因此,redis的读取速度要比mysq ...

  6. app:利用HBuilder打包webpack项目

    1.安装HBuilder 2.将你的项目在HBuilder中打开 3.控制台 打包编译 npm run build 4.新建一个app项目,将项目编译生成的dist文件夹 ,复制到app项目中 5.双 ...

  7. java笔记（Idea，Maven）：误删maven项目的target的class，怎么再生成target

    右边侧边栏clean一下,target目录删掉了.或是手动删掉了.再建. 跑一下 Tomcat.   target自动生成. 就这样.:)

  8. Android Studio升级到3.4遇到的问题总结

    1.gradle需要升级. 1).project的build.gradle文件写下如下代码: buildscript { repositories { google() jcenter() } dep ...

  9. android studio 开发免安装的app之目录结构

    尚未深入分析,暂且外链到我看到的,对此有帮助的博客,在此,感谢你们. 1.https://blog.csdn.net/tscyds/article/details/74331085 2.https:/ ...

  10. Git 如何解决部署远程仓库出现 fatal: refusing to merge unrelated histories 问题

    想把本地仓库的文件搬到Github,先将远程仓库和本地仓库关联起来: 先到Github上复制远程仓库的SSH地址: 运行 git remote add origin 你复制的地址 理论上—如果在创建 ...