1.dom操作1
/*
javaScript主要分为：
1.ECMAScript：包含js中的基本语法、变量、数据类型、程序结构、函数、对象
2.Dom：文档对象模型
获取节点对象，可以操作（增删查改）节点，主要是节点的样式和内容
3.Bom：浏览器对象模型
对浏览器进行设置，宽、高、位置、边框等
*/
<!--
dom可以操作页面的每个节点
文当中的每一个元素都可以看成一个节点
节点划分：
一、根节点：html
二、元素节点：head、body
三、属性节点：如class style id
四、文本节点：如hello world!
-->
<!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>Dom操作</title>
<style type="text/css">
.first{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
/*
javaScript主要分为：
1.ECMAScript：包含js中的基本语法、变量、数据类型、程序结构、函数、对象
2.Dom：文档对象模型
获取节点对象，可以操作（增删查改）节点，主要是节点的样式和内容
3.Bom：浏览器对象模型
对浏览器进行设置，宽、高、位置、边框等
*/
</script>
</head>
<body>
<!--
dom可以操作页面的每个节点
文当中的每一个元素都可以看成一个节点
节点划分：
一、根节点：html
二、元素节点：head、body
三、属性节点：如class style id
四、文本节点：如hello world!
-->
<div class="first" id="one">
hello world!
</div>
<div class="first">
</div>
<div class="second">
</div><br>
<input type="text" name="username">
<br>
<br>
<input type="text" name="psw">
<div name="username">
</div>
<script type="text/javascript">
// 1.通过属性ID获取一个对象
var div=document.getElementById("one");
console.log(div);
// 2.通过标记获取页面上所有的元素对象
var list=document.getElementsByTagName("div");
//返回一个集合
console.log(list);
// 查看所有元素
for(var index in list){
console.log(list[index]);
}
// 3.通过选择器，获取指定的元素对象
// 通过id来获取元素对象
var div1=document.querySelector("#one");//每次只会获取第一个元素
console.log(div1);
// 通过类选择器查找元素
var div2=document.querySelector(".first");
console.log(div2);
// 通过标签选择器查找元素
var div3=document.querySelector("div");
console.log(div3);
// 4.通过class选择器，返回所有的集合对象
list=document.getElementsByClassName("first");
console.log(list);
// 5.通过name属性获取集合对象
list=document.getElementsByName("username");
console.log(list);
</script>
</body>
</html>2.dom节点操作
/*
Dom节点操作：通过当前节点获取子节点、父节点、兄弟节点
节点的类型：元素节点，文本节点，属性节点，注释节点
获取节点：
1.通过id、类、标签、选择器、name获取
2.通过节点获取相关联的节点
*/
<!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>Dom节点</title>
</head>
<body>
<ul>
<li>三国演义</li>
<li>红楼梦</li>
<li>西游记</li>
<li>水浒传</li>
</ul>
<div>
asa
</div>
</body>
<script type="text/javascript">
// 1.获取ul节点
var ul = document.querySelector("ul");
// 查看节点的类型
var type = ul.nodeType;//节点类型
var nodeName = ul.nodeName;//节点的名字
var value = ul.nodeValue;//节点的值
console.log(type);
console.log(nodeName);
console.log(value);
// 2.获取子节点 返回一个集合
var nodes = ul.childNodes;
console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
var tmp = nodes[i];
console.log(tmp.nodeType);
console.log(tmp.nodeName);
console.log(tmp.nodeValue);
}
// 获取元素节点
nodes = ul.children;
console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
var tmp = nodes[i].childNodes[0];
console.log(tmp.nodeType);
console.log(tmp.nodeName);
console.log(tmp.nodeValue);
}
// 获取ul下的第一个节点
var firstNode = ul.firstChild;
console.log(firstNode);
// 获取ul下第一个元素节点
var firstElementNode = ul.firstElementChild;
console.log(firstElementNode);
// 获取最后一个节点
var last = ul.lastChild;
console.log(last);
// 获取最后一个元素节点
last = ul.lastElementChild;
console.log(last);
// 获取兄弟（下一个）元素
var nextNode = firstElementNode.nextElementSibling;
console.log(nextNode);
// 上一个节点元素
var preNode = nextNode.previousElementSibling;
console.log(preNode);
// 获取当前节点的父节点
var parentNode = preNode.parentElement;
console.log(parentNode);
</script>
</html>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>节点操作（增删查改）</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<input type="text" name="user" id="first">
</div>
<input type="button" value="追加" onclick="toAdd()">
<input type="button" value="插入" onclick="toInsert()">
<input type="button" value="替换" onclick="toReplace()">
<input type="button" value="删除" onclick="toDelete()">
<div>
<input type="button" value="属性" onclick="toAttri()">
</div>
</body>
<script type="text/javascript">
// 动态添加一个元素
function toAdd() {
// 1.找到节点元素
var div = document.querySelector("div");
// 2.创建一个元素节点
var input = document.createElement("input");
// 3.节点元素追加到div中(在后面追加)
div.appendChild(input);
}
// 动态插入一个元素
function toInsert() {
// 1.创建一个元素
var span = document.createElement("span");
// 2.给标签设置内容
span.innerHTML = "我是qq";
// 3.插入元素
// 3.1找到父节点元素
var div = document.querySelector("div");
// 3.2找到要在哪个元素之前添加节点，最后一个之前
var last = div.lastElementChild;
div.insertBefore(span, last);
}
// 动态替换一个元素
function toReplace() {
// 1.创建一个节点元素
var newSpan = document.createElement("span");
newSpan.innerHTML = "Hello!";
// 2.找到要替换的元素
var first = document.querySelector("input");
// 3.替换子节点元素
var div = document.querySelector("div");
// 替换元素、被替换元素
div.replaceChild(newSpan, first);
}
// 删除指定节点元素
function toDelete() {
// 1.找到要删除的节点
var delElement = document.querySelector("sapn");
// 2.删除指定节点
var div = document.querySelector("div");
div.removeChild(delElement);
}
// 属性节点 对属性进行操作
function toAttri(){
// 1.获取要操作的元素节点
var input=document.querySelector("#first");
// 2.设置属性（key、value）
input.setAttribute("value","你好！");
// 3.修改属性的值
input.setAttribute("value","Hello！");
// 4.设置属性的样式
input.setAttribute("style","color:blue");
// 5.更改样式
input.style.backgroundColor="yellow";
input.style.borderRadius="10px";
// 6.删除属性
input.removeAttribute("value");
}
</script>
</html>4.copy节点
<!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>copy节点</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
}
.first,.second,.third{
width: 300px;
}
.second{
height: 100px;
background: green;
}
.third{
height: 200px;
background: rebeccapurple;
}
</style>
</head>
<body>
<div class="first">
<div class="second">
<ul>
<li>三国演义</li>
</ul>
</div>
<div class="third">
<ul>
<li>水浒传</li>
</ul>
</div>
</div>
是否深度复制？<input type="radio" name="isdeep" value="yes"> 是
<input type="radio" name="isdeep" value="no"> 否
<input type="button" value="复制" onclick="toClone()">
</body>
<script type="text/javascript">
// 克隆节点元素
function toClone(){
// 查找选项
// 获取节点通过name
var list=document.getElementsByName("isdeep");
var isdeep=false;
if(list[0].checked){
isdeep=true;
}
// 1.找到要克隆的节点元素
var el=document.querySelector(".second");
// 2.克隆出一个新的元素节点 true;深度复制，可以赋值子节点
var newEl=el.cloneNode(isdeep);
// 找到要放的位置
var desEl=el.parentElement;
// 4.追加节点
desEl.appendChild(newEl);
}
</script>
</html>5.自定义对象
<!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>自定义对象</title>
</head>
<body>
<script type="text/javascript">
// 创建一个自定义对象 通过object
var obj=new Object();
// 给属性进行赋值
obj.name="尊";
obj.age=12;
obj.add="葬剑山庄";
// 对对象进行取值
console.log(obj.name+" "+obj.age+" "+obj.add);
// 给对象定义函数
obj.study=function(){
console.log("好好学习，天天向上！");
}
// 调用函数
obj.study();
// 通过构造函数创建一个对象
function Worker(id,name,age){//定义对象
this.id=id;
this.name=name;
this.age=age;
}
// 创建对象
var w=new Worker('1',"qq",21);
console.log(w.id+" "+w.name+" "+w.age);
</script>
</body>
</html>6.table操作
<!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>table操作</title>
<style type="text/css">
table{
border: 1px solid;
border-spacing: 0;
width: 400px;
margin-left: auto;
margin-right: auto;
}
td{
border:1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>标题文档</caption>
<tr>
<td>张三</td>
<td>王二</td>
<td>李四</td>
</tr>
<tr>
<td>张三</td>
<td>王二</td>
<td>李四</td>
</tr>
<tr>
<td>张三</td>
<td>王二</td>
<td>李四</td>
</tr>
</table>
</body>
<script type="text/javascript">
// 获取table
var tb=document.querySelector("table");
// 获取所有行 返回一个集合对象
var rows=tb.rows;
console.log(rows);
console.log(tb.rows.length);
// 获取其中一行总共多少列 返回一个集合
var cols=rows[0].cells;
console.log(cols);
// 给第一行 第一列设置背景颜色
var cell=tb.rows[0].cells[0];
cell.style.backgroundColor="green";
// 更改文本为一个图片
cell.innerText="<img src='2.png'>"//文本识别
// cell.innerHTML="<img src='2.png'>"//可以识别为html
// 想表各种新增一行 0位置
var tr=tb.insertRow(0);
// 新增列
var cell=tr.insertCell(0);
// cell 设置文本内容
cell.innerText="打撒";
cell=tr.insertCell(1);
cell.innerText="的司法程序";
cell=tr.insertCell(2);
cell.innerText="cxcsd";
// 删除一行
// tb.deleteRow(0);
// 删除表格的最后一行
// tb.deleteRow(tb.rows.length-1);
// 删除指定的某一列
tr.deleteCell(0);
</script>
</html>7.计时器
<!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>计时器</title>
</head>
<body>
<div>
当前系统时间
</div>
<input type="button" value="启动" onclick="start()">
<input type="button" value="停止" onclick="stop()">
</body>
<script type="text/javascript">
// 设置启动定时器
// var timer=setImmediate(执行函数，间隔的时间);
function updatetime() {
var date = new Date();
// 获取年
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// 拼接字符串
var str = year + " 年" + (month+1) + " 月" + day + " 日" + h + ":" + m + ":" + s;
var div = document.querySelector("div");
div.innerText = "当前系统时间是：" + str;
}
// 启动定时器
var timer=setInterval(updatetime,1000);
var timer;
// 清空定时器
// clearImmediate(timer);
function start() {
// 启动定时器
if (timer == undefined) {
timer = setInterval(updatetime, 1000);
}
}
function stop() {
if (timer != undefined) {
clearInterval(timer);
timer = undefined;
}
}
// 延迟多少s执行一个函数
// setTimeout(openUrl,5000);
// function openUrl(){
// // 打开连接
// window.location.href="http://www.runoob.com/js/js-htmldom-collections.html";
// }
// 清空延时
// clearImmediate(timer);
</script>
</html>