// 在不同的浏览器查看各种属性,样式。如果不知道哪个对象的属性样式怎么写,可以在控制台输出 style attributes
//   所有的属性样式都会出现
// 此外还可以检查某个属性在不同浏览器是否支持,是否需要加厂商前缀
总而言之,检验浏览器是否支持某个对象 或 属性 ,

  不支持全部返回 undefined,

  支持 属性 / 样式 都返回 [空字符串]   对象则 相应类型,具体如下:

  console.log( domObj.style['xxx'] )      //支持  返回 [空字符串] , 不支持 返回 undefined

  console.log( domObj.attributes['xxx'] )      //支持  返回 [空字符串] , 不支持 返回 undefined

  console.log( typeof  domObj )       //支持  返回 相应数据类型, 不支持 返回 undefined

  不能直接输出未定义的对象,否则直接报错。

1,console.log(document.body.style);//查看某个对象的所有样式

如:console.log(document.querySelector('a').style);//查看a对象的所有样式

  console.log(document.body.style['transition']);// 在某个浏览器中查看是否支持某个样式,

    如果支持,返回值:[空字符串]        如果不支持,则返回:undefined

    即:不存在的对象,直接报错;不存在的属性,返回 undefined,样式也是DOM的一种属性,所以我们设置属性时,一定记得如下赋值:

             引用类型声明(对象):  var  obj = null ,  var arr = null , var obj = {}

       基本数据类型声明:   var  num = 0;     var  str = '';

2,console.log(document.body.attributes);//查看某个对象的属性

如:console.log(document.querySelector('a').attributes); //查看 a 对象的所有属性

///  不存在的对象,直接报错  ;  不存在的属性,返回undefined  ,可以使用以下方式验证浏览器是否支持该属性。

  console.log(document.querySelector('a').attributes['href']);  //返回   href = "";   支持的浏览器返回 [空字符串]

  console.log(document.querySelector('a').attributes['hrefss']);  //返回 undefined; 不存在的属性返回未定义

  console.log(abc);     //不存在的对象  直接报错

3,使用 typeof 判断浏览器是否支持某个对象

  支持返回相应类型,不支持则返回 undefined

   //不存在的对象直接输出就会报错,所以不适用该方式编码: console.log(abc);

  console.log(typeof abc); //不存在的对象,返回类型是:undefined,支持则则返回相应对象

       console.log(typeof 'aa');//返回类型:string

       console.log(typeof 67);//返回类型:number

  console.log(typeof {});//返回类型:object

  console.log(typeof document.querySelector('a')); //返回类型:object

//如果要查看body对象的属性,使用控制台输出,可以直接使用父元素打印obj.children在控制台显示所有的子元素
 //并且找到body,继续点击就可以看到body的属性了,其他元素同理都是在控制台查看
 console.log(document.children);
 
 //在火狐是输出对象的属性,在谷歌是输出整个对象
 console.log(document.querySelector('body'));

=====================================

在 谷歌 欧朋浏览器中可以查看各种方法:

1,打开控制台

2,点击眼睛

3,在Expression(表达式)中输入表达式

  如:input,就可以看到关于input的所有方法,支持模糊匹配。

==================================

以下是在火狐浏览器中查看各种方法:

1,打开控制台

2,点击控制台右上角的三个点----点击设置

3,找到默认的开发者工具----------勾选DOM即可

4,点击控制台中的 DOM面板-------在过滤输入框中输入方法名

  如:transition 即可,支持模糊匹配

图一:               图二:

图三:

查看DOM对象的style样式,attributes属性,children的更多相关文章

  1. JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  2. Document对象操作、样式、属性、效果、

    Windows对象主要是操作浏览器外层的东西,而DOM对象是操作浏览器里面的东西. 如果我们要操作网页内容,那么一定需要操作标签! Document:文档对象模型→DOM:可以做一些特效(抢票的).摘 ...

  3. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

  4. js获取dom对象style样式的值

    js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(o ...

  5. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  6. jQuery对象与DOM对象

    jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...

  7. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  8. DOM对象与JQUERY对象的相互转化

    普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途 ...

  9. jQuery学习笔记(一)--jQuery对象与DOM对象相互转换

    通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现: 通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 通 ...

随机推荐

  1. Linux基础-04-权限

    1. 查看文件的权限 1) 使用ls –l命令查看文件上所设定的权限. -rw-r--r-- 1 root root 605 Mar 18 20:28 .jp1.tar.gz 权限信息 属主 属组 文 ...

  2. WUSTOJ 1324: Base64 Coding(Java)未解决,求题解

    题目链接:1324: Base64 Coding 资料:ASCII码表 原文是英文,而且篇幅较长.因此下面不粘贴原文,只写中文大意. Description Base64是一种编码算法.它的工作原理是 ...

  3. MySQL 体系结构及存储引擎

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  4. C# 使用Berkeley DB

    Berkeley DB是一个开源的文件数据库,介于关系数据库与内存数据库之间.简称BDB Berkeley DB是嵌入式键值数据库库,为应用程序提供可扩展的高性能数据管理服务. Berkeley DB ...

  5. linux环境,hidraw设备自动加载时默认权限的设置方法

    在linux系统中,hidraw设备会自动加载并设置默认权限,但系统的默认只允许root用户访问,普通用户是不允许读写. 设置的方法是修改udev的配置,配置路径是/etc/udev/rules.d/ ...

  6. Go 编译 && 工具

    编译和工具链 Go 的工具链非常丰富,从获取源码.编译.文档.测试.性能分析,到源码格式化.源码提示.重构工具等应有尽有 在 Go 中可以使用测试框架编写单元测试,使用统一的命令行即可测试及输出测试报 ...

  7. python路径相关处理

    一.绝对路径 import os path1=os.path.abspath('.') #表示当前所处的文件夹的绝对路径 print(path1) path2=os.path.abspath('..' ...

  8. FreeRTOS 任务创建和删除(动态)

    TaskHandle_t taskhandle; TaskHandle_t taskhandle1; void vTask(void *t) { int i = 0; while(1) { i++; ...

  9. springboot学习入门简易版四---springboot2.0静态资源访问及整合freemarker视图层

    2.4.4 SpringBoot静态资源访问(9) Springboot默认提供静态资源目录位置需放在classpath下,目录名需要符合如下规则 /static  /public  /resourc ...

  10. Java中关于String类型的一些思考

    作为初学者在学习Java的时候,变量类型是不可避免会遇到的,在以往我们的印象中字符串String都是作为基本类型而存在的,但是在Java中String类型确是一个实实在在的引用类型,是可以通过new关 ...