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. Java后端学习，推荐书籍和学习路线

    最近在学习Java和全栈开发,推荐一些有用的书籍 书架主要针对Java后端和全栈开发用的 书籍介绍 <Spring Boot 2.0企业级应用开发实战> 本书深入浅岀地讲解了 Spring ...

  2. Python迭代器、生成器

    迭代器 iterator # 只要是能被for循环的数据类型 就一定拥有__iter__方法 # 迭代器多了的方法 print(set(dir([].__iter__()))-set(dir([])) ...

  3. python-常见数据类型及其方法

    常见数据类型及其方法 1.None: 表示空(无任何功能,专门用于提供空值) 2.整形(int) 3.布尔类型(bool) 只有两个结果:True/False: 0/''/[]/()/{}/set() ...

  4. python3下的twistedPOST请求网页

    在python2中我们使用twisted比较方便,网上资料也比较多,但是通常在python3中使用的时候,并不能成功.我也是找了好多资料没有成功之后,自己去尝试做小白鼠,测试了很久之后,发现传递给tw ...

  5. 星环大数据安全组件Guardian与hadoop自带的安全组件区别

    在进行讲解之前,先带大家学习下hadoop关于hdfs自己的安全如何实现的--------------------------- 名词: ACL-访问控制列表(Access Control List, ...

  6. Centos将yum源设置为阿里云的镜像源

    第一步:备份原有镜像源 mv /etc/yum.repo.d/Centos-Base.repo /etc/yum.repo.d/Centos-Base.repo.bak 第二步:下载阿里云的镜像源 w ...

  7. Use try-with-resources

    public void doQueries() throws MyException{ // First try-with-resources. try ( Connection con = Driv ...

  8. Android SDK提供的常用控件Widget “常用控件”“Android原生”

    Android提供一个标准的视图工具箱来帮助创建简单的UI界面.通过使用这些控件(必要时,可以对这些控件进行修改). 创建一个简单的.xml文件,从预览窗口可以看到Android SDK提供的原生控件 ...

  9. CI 框架 隐藏index.php 入口文件 和 设置访问application下子目录

    1.隐藏根目录下 index.php, 在根目录下创建 .htaccess文件 内容如下: <IfModule mod_rewrite.c> RewriteEngine on Rewrit ...

  10. tensorflow 使用 4 非线性回归

    # 输入一个 x 会计算出 y 值 y 是预测值,如果与 真的 y 值(y_data)接近就成功了 import tensorflow as tf import numpy as np # py 的画 ...