一.自定义属性操作
文章目录
1 获取属性值
2. 设置属性值
3. 移出属性
4.自定义属性
1.父亲节点
2.所有子节点(包括换行标签br)
3.兄弟节点
4. 创建节点
5.添加节点
1 获取属性值
2. 设置属性值
// 2. 设置元素属性值
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是
3. 移出属性
// class 不是className
// 3 移除属性 removeAttribute(属性)
div.removeAttribute('index');
4.自定义属性
获取是通过getAttribute(‘属性’) 获取。
H5给我们新增了自定义属性：
兼容性较好，常用：
// 新增的获取自定义属性的方法 它只能获取data-开头的
console.log(div.getAttribute('data-list-name'));//常用
h5新增：考虑兼容性
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
二.节点操作
1 . 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
1.父亲节点
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
2.所有子节点(包括换行标签br)
单个子节点 (不含换行标签):
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
3.兄弟节点
1.node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点，找不到返回null。同样，也是包含所有的节点。
2.node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点，找不到返回null。同样，也是包含所有的节点。
3. node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
4.node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
扫描二维码关注公众号，回复：
11218128 查看本文章
==注意：==3和4都有兼容性问题，i9以上支持
4. 创建节点
5.添加节点
<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);
</script>
此部分为作业部分：
添加表格内容（加强训练）
题目描述
用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：
1）如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全
<style>
table {
width: 600px;
cursor: pointer;
}
table td {
text-align: center;
}
table th {
background-color: blueviolet;
}
table tr {
background-color: pink;
}
</style>
</head>
<body>
<div id="dv">
请输入姓名:
<input type="text" value="" id="uname"/>
<br/> 请输入邮箱:
<input type="text" value="" id="email"/>
</div>
<input type="button" value="添加" id="btn" />
<table border="1" cellpadding="0" cellspacing="0" id="tb">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td>小黑</td>
<td>xiaohei@126.com</td>
</tr>
</tbody>
</table>
<script>
var btn = document.getElementById('btn');
// 获取按钮注册点击事件
btn.onclick = function () {
var flag = true;
// 获取文本框
var uname = document.getElementById('uname');
var email = document.getElementById('email');
if(uname.value == '' || email.value == ''){
alert('请将数据填入完全')
return;
}
// 创建一行
var trObj = document.createElement('tr');
// 把行加入到tbody中
var tbd = document.getElementById('tbd');
tbd.appendChild(trObj);
// 创建列，添加到行中
var td1 = document.createElement('td');
td1.innerHTML = uname.value;
var td2 = document.createElement('td');
td2.innerHTML = email.value;
trObj.appendChild(td1);
trObj.appendChild(td2);
};
</script>
分享到这，有错误之处请指出！
Day3笔记传送门
原创文章 51
获赞 82
访问量 1万+