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的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
随机推荐
- 16.python-I/O模型
一.事件驱动模型1.什么是事件驱动模型:本身是一种编程范式,这里程序的执行是由外部事件来决定的.它的特点是包含一个事件循环,当外部事件发生时使用回调机制来触发相应的处理.常见的编程范式(单线程)同步以 ...
- maven 使用axis2 client 需要导入的依赖
<dependency> <groupId>org.apache.axis2</groupId> <artifactId>axis2</artif ...
- Windows与Linux的命令行命令对比
Windows与Linux的命令行命令对比 * Windows不区分大小写,Linux区分大小写的. sn DOS Command UNIX Equivalent Effect 影响 1 ASSIGN ...
- django登录逻辑
django-restframework中已经实现了登录逻辑,只需要安装配置就可以使用 pip install djangorestframework-jwt REST_FRAMEWORK = { ' ...
- Linux----------mysql进阶
目录 一.破解密码以及无密码登录 1.1 破解密码 1.2 无密码登录 1.3 定义不同的客户端 1.4 家目录下 二.视图 三.函数 3.1 系统函数 3.2 自定义函数 3.3 自定义函数中定义局 ...
- Vue 中渲染字符串形式的组件标签
在vue中如果要渲染字符串形式的标签,vue 提供了 v-html 指令,可以很方便的渲染出来.但是如果这个标签是一个组件,或者element-ui 的组件时,就不能解析出来了,因为v-html 只能 ...
- java 运算符的优先级比较
口诀:淡云一笔安洛三福 单目>算数运算符>移位>比较>按位>逻辑>三目>赋值 单目运算符:+,-,++,-- 算数运算符:+,-,*,/,% 移位运算符:&l ...
- 解决C#程序只允许运行一个实例的几种方法详解
解决C#程序只允许运行一个实例的几种方法详解 本篇文章是对C#中程序只允许运行一个实例的几种方法进行了详细的分析介绍,需要的朋友参考下 本文和大家讲一下如何使用C#来创建系统中只能有该程序的一个实例运 ...
- squid http,https, 代理，默认端口3128
squid http,https, 代理,默认端口3128 https 代理时出现 403,是因为squid默认允许 192.168.0.0 网段代理 在配置文件中,““acl localnet sr ...
- 设计模式之Factory Method模式
作用:将实例的生成交给子类 用Template Method模式来构建生成实例的工厂,这就是Factory Method模式. 在Factory Method中,父类决定实例的生成方式,但并不决定所要 ...