dom元素的操作

一.dom元素属性的获取操作

属性的获取

例如：

console.log(btnlist.style);
console.log(btnlist.style.width);
console.log(btnlist.style.height);

属性的设置
【class的设置】

btnlist.className="btn pink";//设置类名，覆盖原先的类名
console.log(btnlist.classList);//返回元素的class 列表
btnlist.classList.add("data");//添加类
console.log(btnlist.classList.contains("pink"));//检测元素是否具有某个类，输出为true或false
console.log(btnlist.classList.length);//输出元素的类有几个
btnlist.classList.remove("data");//移除类
btnlist.classList.toggle("pink",false);//类别的切换

其中btnlist.classList.toggle后可跟两个参数，参数1是类，后面参数2是true或false；true时添加参数一这个类；false时移除参数1这个类，当false时原class里无参数1这个类时无效；
参数2也可不写，此时参数1为原class时删除这个类；不是远class时添加这个类；

【style的设置】
例：

btnlist.style.width="200px";
btnlist.style="width:120px;height:30px; color:blue;";

注：原生js只能操作元素的行内样式
【元素的自定义属性的设置和获取】

btnlist.setAttribute("neo","自定义");//设置自定义属性
console.log(btnlist.getAttribute("neo"));//获取自定义属性

【dom元素的非行内样式的获取】

console.log(window.getComputedStyle(btnlist).backgroundColor);
    //只能获取非行内样式，不能设置  ，read-only ，只读

二.dom元素子父节点操作

nextElementSibling 下一个元素
previousElementSibling 前一个元素
nextSibling 获取的是下一个节点 （节点包含 符号 文本 元素）
previousSibling 获取的是上一个节点 （节点包含 符号 文本 元素）

console.log(btn.nextElementSibling);
console.log(btn.nextSibling);
console.log(btn.previousElementSibling);
console.log(btn.previousSibling);

childElementCount 获取子元素的个数
children 获取的是子元素的集合
childNodes 获取的是子节点集合
firstChild 获取元素里面的第一个子节点
firstElementChild 获取第一个子元素
lastChild 获取元素的最后一个子节点
lastElementChild 获取最后一个元素
元素的父元素 parentElement
元素的父节点 parentNode
【字符串的大小写转换】

var m = "abc";
console.log(m.toUpperCase());
console.log(m.toLocaleUpperCase());
var a = 1000000000000;
console.log(a.toLocaleString());//类似同String

其中
toLowerCase() 是转化为小写字符串
toUpperCase() 转化为大小字符串
console.log(a.toLocaleString());将数字转换为钱数的显示格式；

【动态创建dom元素】

    var list=document.createElement("button");
    list.class="btn4";
    console.log(list.class);
    document.body.appendChild(list);
    console.log(create);
    console.log("btn4");