一.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");