查看DOM对象的style样式，attributes属性，children

 // 在不同的浏览器查看各种属性，样式。如果不知道哪个对象的属性样式怎么写，可以在控制台输出 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 即可，支持模糊匹配

图一：               图二： 

图三：

 

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/11344134.html