能力越大，责任越大
1. 元素选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"><p>Hello, World!</p></div>
<p>颜色列表</p>
<ul id="colors">
<li class="color">红色</li>
<li class="color">蓝色</li>
<li class="color">黑色</li>
</ul>
<br>
<p>动物列表</p>
<ul id="animals">
<li class="dog">狗</li>
<li class="cat">猫</li>
<li class="alpaca">羊驼</li>
</ul>
</body>
</html>
// 1.根据id查找元素
var div1 = document.getElementById("div1");
console.log(div1.innerText); // Hello, World!
// 2.根据class对象查找元素,结果为Node数组
var colors = document.getElementsByClassName("color");
for (var i = 0; i < colors.length; i++) { // 遍历节点
console.log(colors.item(i).innerText); // 红色、蓝色、黑色
}
// 3.根据标签名查找元素，返回Node数组
var lis = document.getElementsByTagName("li");
console.log(lis.length); // 6
//4.选择器，返回一个节点
var alpaca = document.querySelector("#animals .alpaca");
console.log(alpaca.innerText); // 羊驼
// 5.选择器，返回一个或多个节点
colors = document.querySelectorAll("#colors .color");
console.log(colors.length); // 3
2. 创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 200px; color: gray; background: cyan"
id="div1">
<p><strong>嘿咻、嘿咻！！！</strong></p>
</div>
</body>
<style>
.new-div {
width: 200px;
background: pink;
color: gray;
}
</style>
</html>
var div = document.createElement("div"); // 创建一个新节点
div.id = "div2"; // id
div.className = "new-div"; // class
div.innerHTML = "<p><strong>阿珍爱上了阿强</strong></p>";
document.body.appendChild(div); // 添加到body标签内
var textNode = document.createTextNode("在一个没有星星的夜晚~"); // 添加文本节点
div.appendChild(textNode);
3.节点关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="role">
<p id="akali">阿卡丽</p>
<p id="jax">贾克斯</p>
<p id="yi">剑圣</p>
<p id="temmo">提莫</p>
<p id="nunu">努努</p>
</div>
</body>
</html>
var div = document.getElementById("role");
var children = div.childNodes;
console.log(children.length); //11 史前巨坑:5个p标签和6个nodeValue为""的文本节点
for (var i = 1; i < children.length; i += 2) { // 遍历p标签
console.log(children[i].innerText); // 阿卡丽、贾克斯、剑圣、提莫、努努
}
var akali = children.item(1);
console.log(akali.textContent); // 阿卡丽
var jax = akali.nextSibling.nextSibling; // nextSibling返回下一个节点
console.log(jax.textContent); // 贾克斯
var jax2 = akali.nextElementSibling; // 返回元素的下一个兄弟元素节点
console.log(jax2.textContent); // 贾克斯
var p1 = document.createElement("p");
p1.id = "annie";
p1.innerText = "安妮";
div.appendChild(p1); // 添加子元素
var p2 = document.createElement("p");
p2.id = "kayle";
p2.innerText = "凯尔";
div.insertBefore(p2, jax); // 插入子元素
4. 属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username" class="username" placeholder="请输入名称"
data-tip="sky">
<div style="width: 200px; background: beige; color: fuchsia; margin-top: 5px"
id="div1">
<p>窗前明月光，疑是地上霜。</p>
</div>
</body>
</html>
var username = document.getElementById("username");
//获取属性
console.log(username);
console.log(username.id);
console.log(username.className);
console.log(username.placeholder);
// console.log(name.data-tip); error
//修改属性
username.id = "nickname";
username.className = "nickname";
username.placeholder = "请输入昵称";
// username.data-tip = "sea"; // error
//获取和设置属性
console.log(username.getAttribute("data-tip")); // sky
username.setAttribute("data-tip", "sea"); // correct
//attributes属性
var attrs = username.attributes; // NameNodeMap
var tip1 = attrs.getNamedItem("data-tip").nodeValue; // sea
var tip2 = attrs["data-tip"].nodeValue; // sea
console.log(tip1);
console.log(tip2);
//修改css样式
var div1 = document.getElementById("div1");
div1.onclick = function (ev) {
div1.style.fontSize = "24px";
div1.style.color = "black";
div1.style.border = "1px solid blue";
}
5. 表单操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="userForm" name="userForm" action="demo2.html" method="get" onsubmit="return check()">
用户名：<input id="username" type="text" name="username" placeholder="请输入用户名"><br/>
密码：<input type="password" name="password"><br/>
昵称：<input id="nickname" type="text" name="nickname" value="大名鼎鼎"><br>
性别：男<input type="radio" name="gender" value="男">
女<input type="radio" name="gender" value="女"><br/>
宠物：狗<input type="checkbox" name="pet" value="dog">
猫<input type="checkbox" name="pet" value="cat">
熊<input type="checkbox" name="pet" value="bear"><br/>
城市<select id="city" name="city">
<option value="1">广州</option>
<option value="2" selected="selected">东莞</option>
<option value="3">深圳</option>
<option value="4">中山</option>
</select><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
<button id="submitBtn">提交表单</button><br>
<button id="selectBtn">选择框测试</button>
</body>
</html>
var userForm = document.userForm; // 获取表单
var username = userForm.username; // 获取username元素
console.log(username.placeholder); // 请输入用户名
var nickname = userForm["nickname"]; // 获取nickname元素
console.log(nickname.value); // 大名鼎鼎
//获取表单对象属性
console.log(userForm.method); // get
// 提交表单
var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function (ev) {
userForm.submit();
};
//检测表单是否可提交，只有点击“注册”按钮才会生效，
// 点击“submitBtn”按钮不会做表单验证
function check() {
return username.value != null && username.value !== ""
&& username.value.indexOf(" ") !== 1; // username为空或有空格不能提交
}
//测试选择框
var selectBtn = document.getElementById("selectBtn");
selectBtn.onclick = function (ev) {
var sel = userForm.city;
console.log("选择框测试:");
console.log(sel.value); // 等于选中的option的value
console.log(sel.selectedIndex); // 选中的option的索引
// console.log(sel.options);
var opt = sel[sel.selectedIndex];
console.log(opt.value);
console.log(opt.innerText);
};
/**
* 从其他地方摘抄过来的：
* 1.readonly
* 1)input对象 设置了readonly="readonly"，则该表单域只读（
* 用户不能修改其value属性），但是可以提交
* 2)通过js为input对象添加“只读”属性，应通过“对象.readOnly = true”添加
* 3)readonly="readonly" 只能使用在<input type='text'> 及 <textaread>标签中
* 2.disabled
* 1)input对象 设置了disabled="disabled"，则该表单域不可用（
* 用户不能修改其value属性）且不能提交
* 2)通过js为input对象添加“不可用”属性，应通过“对象.disabled = true”添加
* 3)disabled="disabled"可以将所有的表单域失效
* 3.name
* 1)用于获取该表单域
* 2)只有设置了name属性的表单域才可以提交
* 4.value
* 1)用户输入的内容就是value，表单会提交该属性的值
* 2)select标签的value值就是当前选中的option的value值
* 3)textarea没有value属性，提交时提交标签中间的文本值
* 5.form
* 用于获取表单域所在的表单对象
* 6.type
* 浏览会根据type的值不同，显示表单域也不同
* 7.checked
* 1)对于<input type="radio"> 和 <input type="checkbox">来讲
* ,checked="checked"表示默认选中该选项
* 2)<input type="radio"> 只能给同组的一个添加 checked="checked"
* 3)<input type="checkbox"> 可以给同组的所有添加 checked="checked"
* 4)通过js为对象添加“默认选中”属性，应通过“对象.checked = true”添加
* 8.select标签的属性
* 1)selectedIndex表示当前选中的option的索引
* 2)options表示所有option标签对象的一个数组
* 3)length表示右多少个下拉列表项
* 9.option标签的属性
* 1)value 就是选项的值，提交时会提交该属性的值
* 2)text 就是option标签中间文本值，类似于innerText
* 3)selected="selected" 表示页面加载时默认的选项
*/
网友评论