html5与css3学习笔记之（三）dom元素的操作和获取

 

dom元素的操作和获取

1、elementByTagName，获取数组

索引获取，不直观，以后的数据都是从后台动态获取，前台动态生成添加

document.getElementByTagName(" ") [0];

2、querySelecter ，查询选择器名称

document.querySelecter(" ");

document.querySelecterAll(" ");

---

 

添加\删除\切换 样式 

document.querySelecter(" ").classList.add(" ");

document.querySelecter(" ").classList.remove(" ");

document.querySelecter(" ").classList.toggle(" ");

注：classList是样式的数组

判断是否包含某样式

var isContain = document.querySelecter("li").contains("red");
console.log(isContain);

　返回值为true / false

---

 

自定义属性

规范：

1、data-开头

2、data-后至少有一个字符

<p data-school-name="itcast">自定义属性值<p>

<script>
    window.onload=function(){
        var p=document.qurerySelect("p");
        /*将data-后面的单词使用camel命名法连接*/
        var value=p.dataset["schoolName"];
        console.log(value);
    }
</script>

 建议：

名称都使用小写，不要有特殊字符，不要纯数字