05 JS基础DOM
JS的window对象定时器：
window下一些方法：
<script>
弹出
window.alert('hello')
返回布尔值
var ret = window.confirm('hello lzy')
console.log(ret)
返回输入
var ret1 = window.prompt('hello ///')
console.log(ret1)
转到新窗口
open('http://www.baidu.com')
</script>
显示时间：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type = 'text' id = 'id1' onclick = "begin()">
<button onclick = "end()">停止</button>
<script>
function showTime() {
var current_time = new Date().toLocaleString();
var ele = document.getElementById('id1');
ele.value = current_time;
}
var clock1;
function begin() {
if (clock1 == undefined) {
showTime();
clock1 = setInterval(showTime, 1000)
}
}
function end(){
clearInterval(clock1);
clock1=undefined
} </script>
</body>
location://加载网址？
<body>
<button onclick = "f()"></button>
<script> function f(){
// location.assign("http://www.baidu.com")
// location.reload()
// location.replace("http://www.baidu.com")
}
</script>
</body>
DOM节点：DOM定义了访问HTML和XML文档的标准：是W3C（万维网联盟）
的标准
分为三个不同部分：
核心 DOM 针对任何结构化文档的标准模型
XML了DOM 针对XML文档的标准模型
HTML DOM 针对HTML文档的标准模型
基础属性：
<body>
<div class = "div1">
<p class = "p1">hello p</p>
<div class = "div2">hello div2</div>
</div>
<script>
var ele = document.getElementsByClassName("p1")[0];
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
console.log(ele.innerHTML);
ele.innerHTML = "hello world"; var p_ele = ele.parentNode;
console.log(p_ele.nodeName)
var b_ele= ele.nextSibling;
console.log(b_ele.nodeName) var b_ele2 = ele.nextElementSibling;
console.log(b_ele2.nodeName)
console.log(b_ele2.nodeName)
</script>
</body>
查找：
ID NAME classname tagname；
<body>
<div class = "div1">
<p name = "littleP" class = "p1">hello p</p>
<div class = "div2">hello div2
<div>div3</div>
<a href="">click</a>
</div>
<span>span111</span>
</div>
<span>spanspanspanspan</span>
<div>hhhhh</div>
<script>
var ele4 = document.getElementsByName("littleP")[0]
var ele5 = ele4.nextElementSibling;
console.log(ele5.innerHTML);
console.log(ele5.innerText);
//局部查找
var ele6=document.getElementsByClassName("div1")[0];
var ele7=ele6.getElementsByTagName("span");
console.log(ele7[0].innerHTML)
</script>
</body>
Event（事件）：
search：
<input type = "text" id = "search" value = "请输入用户名" onfocus = "f1()">
<script>
var ele = document.getElementById("search")
function f1(){
if(ele.value == "请输入用户名"){
ele.value ="";
} }
function f2(){
if(!ele.value.trim()){
ele.value = "请输入用户名";
}
}
</script>
load事件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f(){
var ele = document.getElementsByClassName("div1")[0]
console.log(ele.innerHTML)
}
// ele.css("color","red")
</script>
</head>
<body onload = "f()">
<div class = "div1">hello div1</div> </body>
事件绑定：
<body> <div class="v1">
<div class="v2">dddd</div>
<div class="v2">dddd</div>
<div class="v2">dddd</div>
<div class="v2">dddd</div>
<div class="v2">dddd</div>
<p id="p1" onclick="func(this)">pppppp</p>
</div> <script>
function func(that) {
console.log(that) console.log(that.previousElementSibling);
console.log(that.parentNode); } // var ele=document.getElementById("p1");
// ele.onclick=function () {
// alert(123)
// };
// 事件绑定2
// var ele2=document.getElementsByClassName("v2");
//
// for(var i=0;i<ele2.length;i++){
// ele2[i].onclick=function () {
// alert(555)
// }
// }
//
</script>
</body>
onsubmit事件与组织事件拖延
<body>
<form action = "" id = "form">
<input type="text" name = "username">
<input type="submit" value = "提交">
</form>
<!--onsubmit提交时触发 如果验证失败 组织触发-->
<script>
var ele = document.getElementById("form")
ele.onsubmit = function (e) {
alert(1234)
// return false //此处返回false 不提交
// e.preventDefault() //组织第二方式
}
// Event里面一个参数 such as “e” 拿到此次事件状态信息
</script> </body>
事件传播：（大概同上例子）
<style>
.outer{
width: 300px;
height: 300px;
background-color: aqua;
}
.inner{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class = "outer" onclick="func2()">
<div class = "inner" onclick="func1()"></div>
</div> <script>
var ele = document.getElementsByClassName("inner")[0]
ele.onclick = function(e){
alert("i am inner")
e.stopPropagation()
};
// function func1() {
// alert("i am inner")
// }
function func2() {
alert("i am outer")
}
</script>
</body>
增删改查：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2,.div3,.div4{
width: 300px;
height: 300px;
}
.div1{
background-color: aqua;
}
.div2{
background-color: green;
}
.div3{
background-color: red;
}
.div4{
background-color: black;
}
</style>
</head>
<body>
<div class = "div1">
<button onclick= "add()">add</button>
hello div1</div>
<div class = "div2">
<button onclick="del()">del</button>
hello div2</div>
<div class = "div3">
<button onclick="change()">change</button>
hello div3</div>
<div class = "div4">hello div4</div>
<script>
function change() {
var img = document.createElement("img");
// img.setAttribute("src","4.jgp"); //与下一条命令作用相同
img.src = '4.jpg'; var ele = document.getElementsByTagName("p")[0];
var father = document.getElementsByClassName("div1")[0];
father.replaceChild(img,ele)
}
function add(){
var ele = document.createElement("p");
ele.innerHTML = "hello p";
//可除去内容
// ele.innerHTML = "<h1>hello p</h1>"; #此两处显示区别
// ele.innerText = "<h1>hello p</h1>";
// ele.style.color = "red"; #CSS样式
// ele.style.fontSize = "10px"; var father = document.getElementsByClassName("div1")[0];
father.appendChild(ele)
}
function del() {
var father = document.getElementsByClassName("div1")[0];
var son = father.getElementsByTagName("p")[0];
father.removeChild(son)
}
</script>
</body>
</html>
模块对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1900px;
background-color: aqua;
}
.shade{
position: fixed; //固定
top:0;
left:0;
right:0;
bottom:0;
background-color: burlywood;
opacity: 0.35; //透明度
}
.model{
width:200px;
height: 200px;
background-color: green;
position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
.hide{
display:none; }
</style>
</head>
<body>
<div class = "content">
<button onclick="show()">show</button>
hello
</div>
<div class = "shade hide">hehehe</div>
<div class = "model hide">
<button onclick = "cancel()">cancle</button>
</div> <script>
function show(){
var ele_shade = document.getElementsByClassName("shade")[0];
var ele_model = document.getElementsByClassName("model")[0]; ele_model.classList.remove("hide");
ele_shade.classList.remove("hide")
}
</script>
</body>
</html>
表格框之正反选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick = "selectALL()">全选</button>
<button onclick="Cancle()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table>
<tr>
<td><input type = "checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type = "checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type = "checkbox"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table> <script>
function selectALL() {
var inputs = document.getElementsByTagName("input");
for (var i = 0;i < inputs.length;i++){
input = inputs[i];
input.checked = true;
} }
function Cancle() {
var inputs = document.getElementsByTagName("input");
for (var i = 0;i < inputs.length;i++){
input = inputs[i];
input.checked = false;
} }
function reverse() {
var inputs = document.getElementsByTagName("input");
for (var i = 0;i < inputs.length;i++){
input = inputs[i];
input.checked = !input.checked;
} }
</script> </body>
</html>
二级联动：（省份和市的选择）例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id = "province">
<option value = "">请选择省份</option>
</select>
<select name = "" id = "citys">
<option value = "">请选择城市</option>
</select> <script>
data = {
"河北省":["石家庄",'廊坊'],
"山西省":['大同','太原'],
"陕西省":['西安','延安']
}
// console.log(data);
// console.log(typeof data);
// console.log(data['河北省'])
var pro_ele = document.getElementById("province")
var city_ele = document.getElementById("citys") for (var i in data){
var ele= document.createElement("option");
ele.innerHTML = i;
console.log("hello")
pro_ele.appendChild(ele)
} pro_ele.onchange = function(){
console.log(this.selectedIndex)
console.log(this.options[this.selectedIndex]) var citys = data[this.options[this.selectedIndex].innerHTML]; city_ele.options.length = 1; for (var i=0;i<citys.length;i++){
var ele = document.createElement("option");
ele.innerHTML = citys[i];
city_ele.appendChild(ele)
}
} </script> </body>
</html>
05 JS基础DOM的更多相关文章
- 前端05 /js基础
前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
- JS基础-DOM
DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用 自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 ...
- JS基础DOM篇之二：ＤＯＭ级别与节点层次？
通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别 在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...
- JS基础DOM篇之一：何为DOM？
近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它.谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸 ...
- JS基础---Dom的基本操作
DOM的增删改查 增: 1.创建一个元素节点 document.createElement() 创建新的<p> 元素:var para=document.createElement(&qu ...
- 2.3 js基础--DOM
一.javascript组成 ECMAScript:核心解释器[为我们提供好了最基本的功能:变量声明.函数.语法.运算]. 兼容性:完全兼容. DoM:文档对象 ...
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
随机推荐
- 作业二、comp和swap函数
一.swap函数的代码及运行情况 1.代码 #include<stdio.h> int main() { void swap(int *m,int *n); int a,b; int *p ...
- IIC详解
(1)概述 I2C(Inter-Integrated Circuit BUS) 集成电路总线,该总线由NXP(原PHILIPS)公司设计,多用于主控制器和从器件间的主从通信,在小数据量场合使用,传输距 ...
- maya模板lock工具
#lockTemple import maya.cmds as mcimport stringif mc.window('LockWin',ex=1)==1: mc.deleteUI(' ...
- The 19th Zhejiang University Programming Contest Sponsored by TuSimple (Mirror)
http://acm.zju.edu.cn/onlinejudge/showContestProblems.do?contestId=391 A Thanks, TuSimple! Time ...
- admin-4
每个学员机上有三台预先配置好的虚拟机server —— 作为练习用服务器desktop —— 作为练习用客户机classroom —— 提供网关/DNS/软件素材等资源 通过真机上“虚拟系统管理器”访 ...
- 【转载】【SQL练习】经典SQL练习题
出处 https://blog.csdn.net/mrbcy/article/details/68965271 准备数据 建表语句 CREATE TABLE students (sno VARCHAR ...
- java 线程理解
import java.util.concurrent.Executor; import java.util.concurrent.ExecutorService; import java.util. ...
- python 和python-m 的区别
首先在python自带的,help命令中,可以看到,官方的说明是:-m mod : run library module as a script (terminates option list) 意思 ...
- HNOI2006公路修建问题
https://www.luogu.org/problemnew/show/P2323 [题目描述] OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发 ...
- taro 报错及解决
1.解决:taro 升级到最新版(npm install -g @tarojs/cli) 错误 组件编译 组件src/pages/xxx/xxx.tsx编译失败! TypeError: callee. ...