==================================DOM================================
获取元素
1.ID获取元素
var xx = document.getElementById('ID')
2. 根据标签名选取
var xx = document.getElementsByName('标签')
3.class获取元素 H5新增
var xx = document.getElementsByClassName('class')
4 querySelector 所有选择器
var xx = document.querySelector('选择器') //id # / class ./
========================事件三要素
1.事件源 事件被触发的对象
2.事件类型 如何触发 比如鼠标点击 鼠标经过 键盘按下
3.事件处理程序 通过一个函数赋值的方式 完成
======================操作元素 获取元素》注册事件》处理程序
改变元素内容
1、element.innerText 不识别HTML标签 去除空格和换行 W3C推荐标准 使用最多
2,、element.innnerHTML 识别HTML标签 保留除空格和换行 非标准
表单元素的属性操作
type/value/checked/selected/disabled
样式属性操作
1、element.style 行内样式操作 样式少用这个
2,element.className 类名样式操作 样式多用这个
=====排它思想
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btn =document.querySelectorAll('button');
for(var i =0;i<btn.length;i++){
btn[i].onclick=function(){
for(var i = 0;i<btn.length;i++){
btn[i].style.backgroundColor='';
}
this.style.backgroundColor='red'
}
}
</script>
=================节点操作
节点层级
1、父节点 parentNode属性可返回某节点的父节点 亲爸爸
2、子节点 children 返回所有元素子节点
3、返回第一个元素子节点 children[0]
4、返回最后一个元素子节点 [children.length-1]
5、兄弟节点 nextElementSibling 得到下一个兄弟元素节点
创建节点
document.creatElement('xx') 动态创建元素节点
添加节点
appendChild 后面追加
insertBefore 前面追加
删除节点
removeChild
复制节点
cloneNode
============================节点操作案例=============================
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
// 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) { // 里面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
// for(var k in obj) {
// k 得到的是属性名
// obj[k] 得到是属性值
// }
</script>
=========================================================================
