查看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 即可,支持模糊匹配
图一:
图二:
图三:
查看DOM对象的style样式,attributes属性,children的更多相关文章
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- Document对象操作、样式、属性、效果、
Windows对象主要是操作浏览器外层的东西,而DOM对象是操作浏览器里面的东西. 如果我们要操作网页内容,那么一定需要操作标签! Document:文档对象模型→DOM:可以做一些特效(抢票的).摘 ...
- jQuery基础(样式篇,DOM对象,选择器,属性样式)
1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...
- js获取dom对象style样式的值
js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(o ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- JS中的DOM对象及JS对document对像的操作
DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...
- DOM对象与JQUERY对象的相互转化
普通处理,通过标准JavaScript处理: 1 var p = document.getElementById('imooc') 2 p.innerHTML = '您好!学习jQuery才是最佳的途 ...
- jQuery学习笔记(一)--jQuery对象与DOM对象相互转换
通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现: 通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 通 ...
随机推荐
- css特效实现透明渐变
知乎发现栏目上的标题图一般都是以下图方式展现的,很显然它是利用渐变去实现的.思路很有意思,主要是要有两方面的认知: 这张图其实可以分成两部分,右边控制图形和渐变,左边就是一张纯色背景,和渐变无关 透明 ...
- 关于使用 symfony 3.4.32中Luckynumber 页面的 route 书写
关于symfony 3.4.32的安装与配置及第一个页面Luckynumber 的route书写 1.symfony 的安装与配置 symfony官网文档:https://symfony.com/do ...
- 从零开始学Flask框架-003
index.py from flask import Flask,render_template from flask_bootstrap import Bootstrap #初始化 app = Fl ...
- linux 列出本文件下的目录
`ls /etc` 和$(ls /etc) 是两种获取命令执行结果的方式. for file in List 的语法里面的List 就是使用使用ls /etc 的命令执行结果作为List(https: ...
- binlogserver搭建
在MySQL 5.7.x版本中,mysqlbinlog工具解析任何一个本地的binlog或relay log时,都不会在mysqlbinlog命令执行结束时追加rollback语句, 但在MySQL ...
- 在论坛中出现的比较难的sql问题:19(row_number函数 行转列、sql语句记流水)
原文:在论坛中出现的比较难的sql问题:19(row_number函数 行转列.sql语句记流水) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记 ...
- SQL根据指定节点ID获取所有父级节点和子级节点(转载)
--根据指定节点ID获取所有子节点-- WITH TEMP AS ( ' --表的主键ID UNION ALL SELECT T0.* FROM TEMP,table_name T0 WHERE TE ...
- canvas 绘制动态圆环进度条
由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_e ...
- 浅谈javascript中变量作用域和内存(2)
1.无块级作用域 javascript没有块级作用域,这会让其他程序员在理解js代码上很痛苦.在其他很多语言,比如C,大括号括起来的代码块都有自己的作用域 举个例子 if(true) { var na ...
- 使用browser-sync预览pandoc markdown???
由于 pandoc markdown在sublime下面并不能很好的预览,因此可以直接 使用 pandoc build成html,然后借助下面的工具进行实时在浏览器里面预览 http://www.br ...