DOM的属性 相同的标签属性： id style className src title checked type placeholder disable value action method
完全没有相同的标签属性： rowspan colspan
对于部分属性名，标签属性和对象属性是共通的 style 可以设置两种值，一种是字符串，一种是对象
div.class=“abc”//不能使用class div.className="abc"等同于在标签中添加了class属性 input.value=“aaa”;//不会出现在标签属性，仅在非文本元素出现 input.checked=false;//这个checked和标签的checked有冲突,有冲突时以对象属性为准
标签属性的存储和获取值分别使用setSttribute，getSttribute 标签属性不能有大小写 标签属性的值都必须是字符型 标签属性是属于暴露值的特征 标签属性设置的目的是为了更加轻松地找到标签 还可以用来存储需要观察的值
设置标签属性 div.setAttribute(属性名,属性值)
标签属性的存储和获取值分别使用setAttribute和getAttribute 标签属性不能有大小写，标签属性值都必须是字符型，标签属性是属于暴露值特征 标签属性设置的目的就是为了更加轻松找到标签，还可以用来存储需要观察的值
删除标签属性 div. removeAttribute(name);
document.body：body元素 document.title：获取、设置文档的标题 document.URL：获得完整的URL
dom自定义的对象属性：除自身拥有的外自己定义的 dom自身有的对象属性：自身带有的
DOM的样式
字符串形态的行内样式，使用分号分隔，样式名称与CSS完全相同 div.style=“width:50px;height:50px;background-color:red”;
对象形态的行内样式，需要一个个定义，要求属性值必须是字符串，如果值是0则可以使用数值，会隐式转换为字符 属性名和CSS不相同，命名标准不同，一个是驼峰式命名，一个是-小写 div.style.width=“50px”; div.style.height=“50px”; div.style.backgroundColor=“red”; div.style.position=“absolute”; div.style.left=0; div.style.top=0;
即使使用的是字符串行内样式，也会在设置后被添加在对象样式中
div.style 是CSSStyleDeclaration类型的对象 只能获取行内样式的结果，CSS样式设置的样式结果是不可以获取的
getComputedStyle(div).width 获取计算后（渲染后）样式 谷歌和火狐浏览器，已经IE8以上支持 div.currentStyle.width ie8及以下
使用try方法获取渲染后样式 var style; try{ style=getComputedStyle(div); }catch(e){ console.log(e); style=div.currentStyle } console.log(style.width);
console.log(document.styleSheets);//获取当前页面中所有的style标签 console.log(document.styleSheets[0]);//第一个style标签 console.log(document.styleSheets[0].cssRules);//第一个style标签中所有选择器CSS列表 console.log(document.styleSheets[0].cssRules[0]);//第一个style标签中选择器CSS列表第一个选择器CSS console.log(document.styleSheets[0].cssRules[0].style);//第一个style标签中选择器CSS列表第一个选择器CSS的样式 console.log(document.styleSheets[0].cssRules[0].selectorText);//第一个style标签中选择器CSS列表第一个选择器CSS的名字 document.styleSheets[0].cssRules[0].style.width=“100px”;可以修改样式
var styleSheet=document.styleSheets[0]; styleSheet.insertRule(“选择器 { 样式内容 }”,插入在第几个选择器索引) styleSheet.insertRule(".div2 {width:100px;height:100px;background-color:blue;}",styleSheet.cssRules.length)// document.styleSheets[0].addRule();//添加选择器样式早期浏览器不支持 styleSheet.addRule(选择器,“CSS样式”，插入在第几个选择器索引)
添加CSS案例
function addCSS(selector, style, title) { // 如果没有设置title参数，默认设置为xietian if (title === undefined) title = "xietian"; // 将当前文档所有的style标签列表转换为数组 var arr = Array.from(document.styleSheets); // 根据归并，判断是否有style的title是我们给入的参数，如果有就这个style标签对应的styleSheet返回 // 如果没有找到返回null var styleSheet = arr.reduce(function (value, item) { if (item.title === title) return item; return value; }, null); // 如果没有找到 if (!styleSheet) { // 创建一个style，并且给他设置title为给入的title，放入到head中 var s = document.createElement("style"); s.title = title; document.head.appendChild(s); // 获取文档styleSheets列表的最后一个，最后一个就是新增的内容 styleSheet = document.styleSheets[document.styleSheets.length - 1]; } var str = ""; // 新建字符串，并且将对象遍历，把每个样式转换为字符形式累加进入 for (var prop in style) { // 样式名需要将大写字母转换为-小写字母，样式值如果是数值，加上px str += prop.replace(/[A-Z]/g, function (value) { return "-" + value.toLowerCase(); }) +":" + (typeof style[prop] === "number"? style[prop] + "px" : style[prop]) +";"; } // 判断是否支持方法addRule，如果支持，直接添加 if (styleSheet.addRule) { styleSheet.addRule(selector, str, styleSheet.cssRules.length); } else { styleSheet.insertRule(selector + "{ " + str + " }",styleSheet.cssRules.length); } }