2-1-js-DOM操作
DOM操作
// DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
// 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
// HTML DOM 模型被构造为对象的树。
// 根节点就是html，然后分为header和body，header里面有标签以及下面的文本，body里面有各种标签和各自的文本，
// ######################
//DOM标准规定HTML文档中的每个成分都是一个节点(node)：
// 文档节点(document对象)：代表整个文档
// 元素节点(element 对象)：代表一个元素（标签）
// 文本节点(text对象)：代表元素（标签）中的文本
// 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
// 注释是注释节点(comment对象)
// ############################
// JavaScript 可以通过DOM创建动态的 HTML：
// JavaScript 能够改变页面中的所有 HTML 元素
// JavaScript 能够改变页面中的所有 HTML 属性
// JavaScript 能够改变页面中的所有 CSS 样式
// JavaScript 能够对页面中的所有事件做出反应，这是最为常用的，
DOM操作-查找元素
// 要操作元素，就要先找到元素，下面讲解如何查找元素
//直接查找
//下面的语句直接输入浏览器的console中就可以执行
document.getElementById("d1");
document.getElementsByClassName("c1");
document.getElementsByTagName("p"); //根据标签名字查找
//间接查找
var d3 = document.getElementById("d3");
d3.parentElement;
/*
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
*/
DOM操作-节点操作
//节点操作
//创建节点
var imgEle=document.createElement("img");
//增加节点的属性
imgEle.src="http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg";
//两种写法一样，
//获取节点
var d1Ele = document.getElementById("d1");
// 追加节点（作为最后的节点）
d1Ele.appendChild(imgEle);
// 把增加的节点，放到某一个节点的前面
var d1Ele2 = document.getElementById("d2");
var d1Ele3 = document.getElementById("d3");
var aEle=document.createElement("a");
d1Ele2.insertBefore(aEle,d1Ele3);
aEle.innerText ="点我";
aEle.href ="http://www.baidu.com";
//设置自定义的属性
imgEle.setAttribute("ss", "ss");
//获取属性
imgEle.getAttribute("ss");
//删除属性
imgEle.removeAttribute("ss");
//innerText
d1Ele2.innerText; //后面不写等于号，就是获取这个标签的所有的文本，
d1Ele2.innerText="hehe"; //有等号，就是把里面设置文本，而且里面的子标签都没有了，所以要找到具体的标签修改，
d1Ele2.innerHTML;//这是获取到下面的标签和文本，里面可以直接写标签，
//删除标签
var d1Ele = document.getElementById("d1");
var sonEle = d1Ele.firstElementChild;
d1Ele.removeChild(sonEle);
//替换标签
var d1Ele = document.getElementById("d1");
var sonEle = d1Ele.firstElementChild;
var aEle=document.createElement("a");
aEle.innerText ="点我";
d1Ele.replaceChild(aEle,sonEle);
DOM操作-节点操作
JS-DOM操作-获取值操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>获取值相关</title>
</head>
<body>
<form action="">
<label>用户名
<input name="username" id="i1" type="text">
</label>
<label>男
<input name="gender" value="1" type="radio">
</label>
<label>女
<input name="gender" value="0" type="radio">
</label>
<select name="from" id="s1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="023">重庆</option>
<option value="022">天津</option>
</select>
<textarea id="t1" name="memo" cols="30" rows="10">
</textarea>
</form>
<script>
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
</script>
</body>
</html>
JS-DOM操作-class操作
//class的操作
//获取class的值
var divs = document.getElementsByTagName("div"); //这是返回一个数组
divs[0] // 这是取值第一个
divs[0].className; //这是取classname的值，
//移除一个class
divs[0].classList;//这是一个数组，
divs[0].classList.remove("c3"); // 对数组操作，移除一个值就简单了，
//添加一个class
divs[0].classList.add("c4");
//包含判断
divs[0].classList.contains("c4");//是否包含，如果包含就是返回true，
//classList.toggle(cls) 存在就删除，否则添加
divs[0].classList.toggle("c4");
// ##############################
//指定css操作
//可以直接通过改动div的一个style属性来改变颜色
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor= "blue";
// JS操作CSS属性的规律：
// 1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
// 2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
对应的HTML
<style>
.c1 {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: gray;
}
.c2 {
background-color: yellow;
}
</style>
JS-DOM操作-绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: gray;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1 c2 c3" onclick="change(this);">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<input id="i1" type="text">
<input id="start" type="button" value="开始">
<input id="stop" type="button" value="停止">
<input id="i3" type="text" value="裤子">
<input id="search" type="button" value="搜索">
<!--这种是输入框有一个默认值，点击之后默认值还在-->
<!--<input id="i3" type="text" placeholder="娃娃">
placeholder，是默认输入框有一个值，点击之后，这个值还在，
-->
<select id="s1">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
</select>
<select id="s2"></select>
<script>
// <!--第一种方式在标签中标记onclick事件-->
function change(ths) {
ths.classList.toggle("c2");//没有添加，有就删除，就实现了一个颜色的切换，这是绑定了一个点击事件，
}
// 第二种方式，找到元素，然后绑定函数这种好一点
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = function () {
this.classList.toggle("c2");//没有添加，有就删除，就实现了一个颜色的切换，这是绑定了一个点击事件，
}
}
// 练习，需求：
// 在input框中显示当前时间
// 1，获取当前时间，
var t; //定义一个全局变量，定义一个全局变量就是为了方便后面的函数内部能调用，
function foo() {
var now = new Date();
var nowStr = now.toLocaleString();
// 2，把时间字符串填入input框中，
var inputEle = document.getElementById("i1");
inputEle.value = nowStr;
}
//点击开始让这个时间动起来，
var startButton = document.getElementById("start");
startButton.onclick = function () {
// 每隔一秒执行一次
if (t === undefined) { //判断一下只有没有定时器的时候才会生成，否则不生成，避免连续点击生成多个，
t = setInterval(foo, 1000);
}
}
// 点击停止，让时间停止
var stopButton = document.getElementById("stop")
stopButton.onclick = function () {
clearInterval(t);//定义一个全局变量就是为了方便这个地方能停止
t = undefined;//因为上一步是清楚了定时器，但是t这个值还是存在的，所以要重置一下t的值为undefined
}
// 现在对输入框做一个事件，
//点击之后value值消失，光标移除之后value值回来
var input3 = document.getElementById("i3");
input3.onfocus = function () {
this.value = "";//this就是这个input框
}
input3.onblur = function () {
//如何值为空，就把值填回去，不是空的就不要再填回去了，
if (!this.value) {
this.value = "娃娃"
}
}
//select联动，
var data = {1: ["昌平区", "朝阳区", "海淀区"], 2: ["静安区", "闵行区", "浦东区"]};
// 给第一个select绑定事件，绑定的是onchange事件，当元素内容被改变时触发
//找到第一个select
var select1 = document.getElementById("s1");
//给这个select绑定事件
select1.onchange = function () {
//获取是选择的哪一个区
console.log(this.value);
//把对应市的区，填入第二个框中，
var areas = data[this.value];
//生成option标签，
var select2 = document.getElementById("s2");
select2.innerHTML="";//把第二个select框清空，
for (var i = 0; i < areas.length; i++) {
var opEle = document.createElement("option");
//添加到第二个标签中
opEle.innerText = areas[i];
select2.appendChild(opEle)
}
}
</script>
</body>
</html>
事件：
//事件是非常重要的，要着重理解，但是后面写的时候我们是使用的jQuery，基本不使用原生的js写
/*
onclick 单击事件，点击的时候触发事件
ondblclick 双击事件
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
* */
