一、自定义属性
1、设置元素属性——setAttribute()
设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。注意，当在 HTML 文档中的 HTML 元素上调用 setAttribute() 方法时，该方法会将其属性名称（attribute name）参数小写化。
element.setAttribute(name, value);
- name（DOMString）：表示属性名称的字符串。
- value（DOMString）：属性的值/新值。
2、获取元素属性——getAttribute()
返回元素指定的属性值。如果指定的属性不存在，则返回 null 或 “” （空字符串）。
let attribute = element.getAttribute(attributeName);
- attribute（DOMString）：一个包含 attributeName 属性值的字符串。
- attributeName（DOMString）：你想要获取的属性值的属性名称。
3、移除元素属性——removeAttribute()
从指定的元素中删除一个属性，既可以是自定义属性，也可以是原来的属性。注意，若要彻底移除一个属性的效果，应当使用 removeAttribute()，而不是使用 setAttribute() 将属性值设置为 null。
element.removeAttribute(attrName);
- attrName（DOMString）：想要移除的属性的属性名称。
4、判断元素是否包含属性——hasAttribute()
返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。
var result = element.hasAttribute(attName);
- result（boolean）： 为返回的布尔值：true 或 false；
- attName（DOMString）： 是一个字符串，表示属性的名称。
5、实例代码
- 示例代码1：设置、获取、移除<li>标签的自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul{
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="myUl">
<li>Tom</li>
<li>Alice</li>
<li>Bob</li>
</ul>
<input type="button" id="btn1" value="setAttribute">
<input type="button" id="btn2" value="removeAttribute">
<script>
var objs = document.getElementById("myUl").getElementsByTagName("li");
document.getElementById("btn1").onclick = function(){
for(i = 0; i < objs.length; i++){
objs[i].setAttribute("age", 18 + i);
}
}
document.getElementById("btn2").onclick = function(){
for(i = 0; i < objs.length; i++){
objs[i].removeAttribute("age");
}
}
for(i = 0; i < objs.length; i++){
objs[i].onclick = function(){
alert(this.hasAttribute("age")? this.getAttribute("age"):undefined);
};
}
</script>
</body>
</html>
- 示例代码2：点击<span>切换样式和同时切换到对应的<li>内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.box{
width: 380px;
height: 300px;
border: 1px solid #ccc;
margin: 100px;
overflow: hidden;
}
.hd{
height: 45px;
}
.hd span{
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
}
.hd span.current{
background-color: purple;
}
.bd{
text-align: center;
}
.bd li{
height: 255px;
background-color: purple;
display: none;
}
.bd li.current{
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">体育模块</li>
<li>娱乐模块</li>
<li>新闻模块</li>
<li>综合模块</li>
</ul>
</div>
</div>
<script>
var hd = document.getElementsByClassName("hd")[0];
var bd = document.getElementsByClassName("bd")[0];
var spans = hd.getElementsByTagName("span");
var lis = bd.getElementsByTagName("li");
for(var i = 0; i < spans.length; i++){
// 设置span的标号
spans[i].setAttribute("index", i);
spans[i].onclick = function(){
// 清除span样式
for(var j = 0; j < spans.length; j++){
spans[j].className = "";
}
// 设置当前点击的span的样式
this.className = "current";
// 隐藏全部li
for(var j = 0; j < lis.length; j++){
lis[j].className = "";
}
// 显示当前span对象的li内容
lis[this.getAttribute("index")].className = "current";
}
}
</script>
</body>
</html>
二、DOM节点
1、节点属性
- nodeTyp：
var type = node.nodeType;
返回一个整数，其代表的是节点类型。例如，元素节点（Node.ELEMENT_NODE），文本节点（Node.TEXT_NODE）。（Node.nodeType 接口参考）
- nodeName：
var str = node.nodeName;
返回当前节点的节点名称，str 是一个存储了当前节点的节点名称的字符串，
nodeName 是一个只读属性。例如，元素节点会返回大写的标签名，文本节点会返回“#text”。（Node.nodeName 接口参考）
- nodeValue：
let value = node.nodeValue;
属性返回或设置当前节点的值。value是一个包含当前节点的值的字符串（如果有的话）。例如，元素节点返回 null，文本节点返回文本内容。（Node.nodeValue 接口参考）
2、获取父节点和父元素
- Node.parentElement：
var parentElement = node.parentElement
返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。
- Node.parentNode：
var parentNode = node.parentNode
返回指定的节点在DOM树中的父节点。对于下面的节点类型: Attr, Document, DocumentFragment, Entity, Notation,其parentNode属性返回null。
3、获取子节点和子元素
- Node.childNodes：
var ndList = elementNodeReference.childNodes;
返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。ndList变量为 NodeList 类型，且为只读。
- Node.children：
var children = node.children;
Node.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
4、获取其他节点和元素
- Node.firstChild：
var childNode = node.firstChild;
只读属性，返回树中节点的第一个子节点，如果节点无子节点，则返回 null。
- Node.firstElementChild：
var element = node.firstElementChild;
只读属性，返回对象的第一个子元素，如果没有子元素，则为null。
- Node.lastChild：
var last_child = element.lastChild;
只读属性，返回当前节点的最后一个子节点。如果没有子节点，则返回 null。
- Node.lastElementChild：
var element = node.lastElementChild;
只读属性，返回对象的最后一个子元素，如果没有子元素，则返回 null。
- Node.previousSibling：
var previousNode = node.previousSibling;
只读属性，返回当前节点的前一个兄弟节点，没有则返回null。
- Node.previousElementSibling：
var prevNode = elementNodeReference.previousElementSibling;
只读属性，返回当前元素的前一个兄弟元素节点,如果该元素已经是第一个元素节点，则返回null。
- Node.nextSibling：
var nextNode = node.nextSibling;
只读属性，当前结点的后一个兄弟节点，如果指定的节点为最后一个节点，则返回 null。
- Node.nextElementSibling：
var nextNode = elementNodeReference.nextElementSibling;
只读属性，返回当前元素的后一个兄弟元素节点，如果该元素已经是最后一个元素节点,则返回null。
5、节点操作
- Node.appendChild()：
var child = node.appendChild(child);
将一个节点添加到指定父节点的子节点列表末尾。
- Node.insertBefore()：
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置。
- Node.appendChild()：
var replacedNode = parentNode.replaceChild(newChild, oldChild);
用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。newChild 用来替换 oldChild 的新节点。如果该节点已经存在于DOM树中，则它会被从原始位置删除。
- Node.removeChild()：
element.removeChild(child);
从DOM中删除一个子节点，返回删除的节点。被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的DOM树中。
6、示例代码
- 示例代码1：
子节点包括子元素和其他子节点，例如，这里<div>标签和<p>标签之间的文本节点（换行符），以及</p>和</div>标签之间的文本（换行符）。
<body>
<div id="dv">
<p>text</p>
</div>
<script>
var obj = document.getElementById("dv");
console.log(obj.childNodes); // 3
console.log(obj.children); // 1
</script>
</body>
- 示例代码2：
兼容不同的浏览器（有的浏览器不支持firstElementChild，lastElementChild），获取元素的第一个或者最后一个子元素。
<body>
<ul id="myUl">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
<script>
function getFirstElementChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var node = element.firstChild;
// 找到第一个元素节点
while(node && node.nodeType != 1){
node = node.nextSibling;
}
return node;
}
}
function getLastElementChild(element){
if(element.lastElementChild){
return element.lastElementChild;
}else{
var node = element.lastChild;
// 找到最后一个元素节点
while(node && node.nodeType != 1){
node = node.previousSibling;
}
return node;
}
}
// first
console.log(getFirstElementChild(document.getElementById("myUl")).innerText);
// fourth
console.log(getLastElementChild(document.getElementById("myUl")).innerText);
</script>
</body>
- 示例代码3：
复选框的全选和全不选效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
width: 300px;
margin: 100px auto;
}
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #F5FAFA;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="choose_all">
</th>
<th>菜名</th>
<th>价格</th>
</tr>
</thead>
<tbody id="t_body">
<tr>
<td><input type="checkbox"></td>
<td>清蒸鲈鱼</td>
<td>60</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>红烧肉</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>家常小炒</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<script>
var cb_th = document.getElementById("choose_all");
var cds_td = document.getElementById("t_body").getElementsByTagName("input");
cb_th.onclick = function(){
for(var i = 0; i < cds_td.length; i++){
cds_td[i].checked = this.checked;
}
}
for(var i = 0; i < cds_td.length; i++){
cds_td[i].onclick = function(){
// 默认认为全选
var flag = true;
for(var j = 0; j < cds_td.length; j++){
if(!cds_td[j].checked){
flag = false;
break;
}
}
cb_th.checked = flag;
}
}
</script>
</body>
</html>
三、元素创建
1、Document.write()
将一个文本字符串写入一个由 document.open() 打开的文档流（document stream），写入到<body>标签中。
document.write(markup);
因为 document.write() 需要向文档流中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 document.write()，就会自动调用 document.open()，这将清空该文档的内容。
- 示例代码：
测试document.write()，不覆盖和覆盖原来内容的情况。
<body>
<input type="btn" id="btn" value="Overwrite the original content">
<div id="j_div">Old content</div>
<script>
// 页面未加载完成时调用，不会覆盖原来的内容
document.write("<p>add new content</p>");
document.getElementById("btn").onclick = function(){
// 页面加载完成后调用，覆盖原来的全部内容
document.write("<p>overwrite content</p>");
}
</script>
</body>
2、Element.innerHTML
属性设置或获取HTML语法表示的元素的后代。如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。
element.innerHTML = htmlString;
- 示例代码：
在<div>标签下，动态创建列表。
<body>
<input type="button" id="btn" value="add list">
<div id="j_div"></div>
<script>
var names = ["Tom","Bob","Alice"];
document.getElementById("btn").onclick = function(){
var insert_content = "<ul>";
for(var i = 0; i < names.length; i++){
insert_content += "<li>" + names[i] + "</li>";
}
insert_content += "</ul>";
document.getElementById("j_div").innerHTML += insert_content;
}
</script>
</body>
3、Document.createElement()
在一个 HTML 文档中， Document.createElement() 方法创建由tagName 指定的HTML元素，或一个HTMLUnknownElement，如果tagName不被识别。
let element = document.createElement(tagName[, options]);
- element：创建的Element对象。
- tagName： 指定将要创建的元素类型的字符串。
- options： 是一个可选的 ElementCreationOptions 对象。 如果这个对象被定义并赋予了一个 is 特性，则创建的element的 is 属性会被初始化为这个特性的值。 如果这个对象没有 is 特性，则值为空。
示例代码：
在<div>标签下，动态创建表格。
<body>
<input type="button" id="btn" value="add table">
<div id="j_div"></div>
<script>
var web_map = [{name:"Baidu", href:"https://www.baidu.com/"},
{name:"Youtube", href:"https://www.youtube.com/"}];
document.getElementById("btn").onclick = function(){
var table_obj = document.createElement("table");
table_obj.border = "1";
table_obj.cellPadding = "0";
table_obj.cellSpacing = "0";
for(var i = 0; i < web_map.length; i++){
var tr_obj = document.createElement("tr");
var td_obj = document.createElement("td");
td_obj.innerText = web_map[i].name;
var a_obj = document.createElement("a");
a_obj.innerHTML = "<a href=" + web_map[i].href + ">" + web_map[i].name + "</a>";
tr_obj.appendChild(td_obj);
tr_obj.appendChild(a_obj);
table_obj.appendChild(tr_obj);
}
document.getElementById("j_div").appendChild(table_obj);
}
</script>
</body>
参考链接：
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
