目录
1. 获取元素
1.1 方式
1.1.1 根据ID获取
语法
var element = document.getElementById('id');
参数
element
是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.id
是大小写敏感的字符串,代表了所要查找的元素的唯一ID.返回值:返回一个匹配到 ID 的 DOM
Element
对象。若在当前Document
下没有找到,则返回 null。
1.1.2 根据标签名获取
语法
document.getElementsByTagName('标签名');
- 返回值:返回的是获取过来元素对象的集合,以伪数组的形式存储的
- 想要依次打印里面的元素对象,可以采取遍历的方式
- element.getElementsByTagName(),可以得到这个元素里面的某些标签
1.1.3 通过html5新增的方法获取
语法
- getElementsByClassName('类名');//根据类名获得某些元素
querySelector(‘’); //返回指定选择器的第一个元素对象,里面的选择器要加符号, .nav,#list
querySelectorAll(‘’); //返回指定选择器的所有元素对象集合
1.1.4 特殊元素获取
获取body元素
document.body;
获取html元素
document.documentElement;
2. 事件基础
2.1 事件三要素
2.1.1 事件源
事件被触发的对象
2.1.2 事件类型
如何触发?鼠标点击?鼠标经过?
2.1.3 事件处理程序
通过一个函数赋值的方式完成
<body>
<button id='btn'>123</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('456');
}
</script>
</body>
2.2 执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值的形式)
2.3 常见的鼠标事件
3. 操作元素
3.1 改变元素内容
3.1.1 innerText
element.innerText='';
从起始位置到终止位置的内容,但他取出html标签,同时空格和换行也会去掉
3.1.2 innerHTML
element.innerHMTL='';
从起始位置到终止位置的内容,包括html标签,同时保留空格和换行
3.2 修改图片 src
<body> <button id='qwe'>logo</button> <button id='asd'>7</button><br> <img src="img/logo.png" alt=""> <script> var btn1 = document.getElementById('qwe'); var btn2 = document.getElementById('asd'); var img = document.querySelector('img'); btn1.onclick = function() { img.src = 'img/logo.png'; } btn2.onclick = function() { img.src = 'img/qitian.png'; } </script> </body>
3.3 表单属性
表单里面的文字内容是通过value来修改的,不能使用innerHTML来修改。
disabled禁用
type等
3.4 样式属性操作
element.style 行内样式操作,驼峰命名法
element.className=‘’ 类名样式操作,className会直接覆盖原先的类名
3.5 排他思想
如果有同一组元素, 我们想要某一个元素实现某种样式,需要用到循环的排他思想
算法:
- 所有元素全部清除样式
- 给当前元素设置样式
- 注意顺序不能颠倒
3.6 自定义属性的操作
element.getAttribute('属性');//获得属性
element.setAttribute('属性','值');//设置属性值
element.removeAttribute('属性');//移除属性
自定义属性以“data-”开头
h5新增的获取自定义属性的方法,dataset是能获取data-开头的自定义属性
<body> <div data-index="20" data-time-today="2020"></div> <script> var div=document.querySelector('div'); // dataset是一个集合里面存放了所有以data开头的自定义属性 div.dataset.index; // 如果自定义属性名有多个-连接,则获取时采用驼峰命名法 div.dataset.timeToday; </script> </body>
4.节点操作
4.1 父节点
element.parentNode
4.2 子节点
element.childNodes //集合,得到所有的子节点,包括元素节点,文本节点等,不好用
element.children //好用
element.firstElementChild //第一个子元素节点
element.lastElementChild //最后一个子元素节点
4.3 兄弟节点
node.nextSibling //上一个节点,不好用
node.previousSibling //下一个节点,不好用
node.nextElementSibling //下一个兄弟元素节点,好用,ie9以上
node.previousElementSibling //上一个兄弟元素节点,好用,ie9以上
兼容性问题的解决方法:封装一个兼容性函数
4.4 创建节点
document.createElement(‘tagName’)
<body> <ul> <li>123</li> </ul> <script> // 1.创建节点 元素节点 var li = document.createElement('li'); // 2.添加节点 node.appendChild(child) node-父级,child-子级 var ul = document.querySelector('ul'); ul.appendChild(li); // 3. 添加节点 node.insertBefore(child,指定元素) 添加在指定元素的前面 var li2 = document.createElement('li'); ul.insertBefore(li2, ul.children[0]); </script> </body>
appendChild(child),在后面添加,不影响原来的元素
4.5 删除节点
node.removeChild(child) //node-父级,child-子级
留言板案例:
<body> <textarea></textarea> <button id='fs'>发送</button> <ul></ul> <script> var ul = document.querySelector('ul'); var btn1 = document.getElementById('fs'); var txt = document.querySelector('textarea'); btn1.onclick = function() { if (txt.value == '') { alert('内容不能为空'); } else { var li = document.createElement('li'); li.innerHTML = txt.value + '\t' + getDate() + '\t' + "<a href='javascript:;'>删除</a>"; // ul.appendChild(li); txt.value = ''; ul.insertBefore(li, ul.children[0]); var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { ul.removeChild(this.parentNode); } } } } function getDate() { var date = new Date; var s = date.getSeconds(); var m = date.getMinutes(); var h = date.getHours(); if (s < 10) { s = '0' + s; } else if (m < 10) { m = '0' + m; } else if (h < 10) { h = '0' + h; } return h + ':' + m + ':' + s; } </script> </body>
4.6 复制节点
node.cloneNode()
注:
- 如果括号里面参数为空或者false,则是浅拷贝,只复制节点本身,不复制里面的内容
- 如果括号里面参数为true,则是深拷贝,复制节点本身以及里面的内容
4.7 动态生成表格
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var dataset = [{
name: '赵钱',
sunject: 'javaScript',
score: 100
}, {
name: '孙李',
sunject: 'javaScript',
score: 96
}, {
name: '周吴',
sunject: 'javaScript',
score: 86
}, {
name: '郑王',
sunject: 'javaScript',
score: 98
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < dataset.length; i++) {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in dataset[i]) {
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = dataset[i][k];
}
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
4.8 三种动态创建元素的区别
- document.write()
- element.innerHTML
- document.createElement()
区别:
- document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
- innerHTML 是将内容写入某个DOM节点,不会导致页面重绘;创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
- document.createElement()创建多个元素效率稍低一点点,但是结构更清晰