49 BOM 和DOM
一.BOM
window 对象
1.确认，输入，
window.alert(123) // 弹框
let ret = window.confirm("是否删除") //确认
let ret =window.prompt(">>>") // 输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> // window对象 alert
// window.alert(123);
// let ret=window.confirm("是否删除?");
// console.log(ret); //true false
// let ret2=window.prompt("请输入验证码")
// console.log(ret2);
</script>
</head>
<body> </body>
</html>
window 对象中打印，弹框，输入
2.定时器
var ID;
ID = setInterval(func名,1000) ; //设置定时器
clearInterval(ID); //清除定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//计时器 function show_time() {
//// 创建时间字符串
var now = new Date().toLocaleString();//此变量需要放在函数内部
var el = document.getElementById("jishiqi");
el.value =now;
}
var ID; //在函数外部先定义一个ID变量，并不赋值，方便其他函数可以引用该变量
function setTimer() {
//if 判断防止，计时器重复设置，没设置计时器之前ID===underfined
if (ID===undefined){
show_time(); //解决需要等待第一秒的问题
ID = setInterval(show_time,1000);//每隔一秒，执行show_time函数一次
}
}
function stop_time() {
clearInterval(ID);
ID = undefined;
} </script> <input type="text" id ="jishiqi" class="c1">
<button onclick="setTimer()">start</button>
<button onclick="stop_time()">end</button> </body>
</html>
计时器
3.location 对象
location.href ="http://www.baidu.com" 跳转到指定页面
location.assign("http://www.baidu.com")跳转到指定页面 （assign表示分配，指派）
location.href 拿到整个url
location.search 拿url数据部分
location.host
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//location.herf 获取url
//location.search 获取url 后的数据部分
// console.log(location.href);
console.log(location.search);
// location.href = "http://www.baidu.com"; //跳转到指定的页面，此处跳转到百度页面
// location.assign("http://www.taobao.com");//跳转到淘宝页面
console.log(location.host);
</script> </body>
</html>
location对象
二.DOM
文档树结构：树形结构
两个DOM(节点)对象：
1.document对象
2.element对象:所有标签
1.查找标签
1.直接查找
document.getElementById() //一个结果
document.getElementsByTagName() // 数组
document.getElementsByClassName() // 数组
document.getElementsByName() // 数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <div class="c1" id="i1">
<p>123</p>
<div class="c2">222</div>
</div> <div class="c2">333</div> <script>
/*
document.getElementById(); // 一个element对象
document.getElementsByClassName(); // 多个element对象构成的数组
document.getElementsByTagName(); // 多个element对象构成的数组
document.getElementsByName(); // 多个element对象构成的数组
document.getElementsByClassName("c2");
*/
var c1=document.getElementsByClassName("c1")[0];
console.log("c1",c1);
var c2=c1.getElementsByClassName("c2")[0];
console.log(c2) </script>
</body>
</html>
2.导航查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
var ul = document.getElementById("target1");//通过id名获取
var li1 = ul.getElementsByClassName("li1")[0];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
}
</style> </head>
<body>
<ul class="box" id ="target1" >
<li class="li1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div></div>
<input type="text" name="wang"> <script>
// 导航查找法 var ul = document.getElementById("target1");//通过id名获取
var li1 = ul.getElementsByClassName("li1")[0]; li1.onclick = function (ev) {
// alert(2);
this.style.background = "pink";
};
//获取下一个兄弟节点
var li2 = li1.nextElementSibling;
li2.onclick = function () {
alert("第2个li");
};
var li3 = li1.nextElementSibling.nextElementSibling;
li3.onclick = function () {
alert("第3个li");
};
//获取父节点
var partent = li1.parentElement;
partent.onclick = function (ev) {
this.style.background ="green";
};
//获取父节点下的所有子节点
var lis = partent.children; </script> </body>
</html>
2..标签控制
1.文本控制
var ele = document.getElementById("d1");
1.获取文本节点的内容
ele.innerText //只得到文本 内容
ele.innerHTML //得到ele标签中所有内容，包括标签
2.设置文本内容
ele.innerText ="<a>yuan</a>" // 不识别标签，显示文本原来的样子
ele.innerHTML ="<a>yuan</a>" //可以识别标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <ul>
<li id="i1">123</li>
<li id="i2"><a href="">123</a></li>
<li>234</li>
<li>789</li>
</ul> <script>
let ele=document.getElementById("i2");
// 获取文本
console.log(ele.innerHTML);
console.log(ele.innerText); //赋值文本
//ele.innerHTML="yuan"
//ele.innerText="yuan"
ele.innerHTML="<a href=''>yuan</a>"
ele.innerText="<a href=''>alex</a>" </script>
</body>
</html>
innerHTML和innerText
3.属性控制
attribute操作
ele.setAttribute("egon","123");
ele.getAttribute("egon");
ele.removeAttribute("alex");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <ul>
<li id="i1">123</li>
</ul>
<input type="text" id="i2"> <script>
let ele=document.getElementById("i1");
let ele2=document.getElementById("i2");
ele.setAttribute("egon","123");
ele.getAttribute("alex");
ele.getAttribute("egon");
ele.removeAttribute("alex") ;
ele2.value;
ele2.value=0 </script>
</body>
</html>
属性控制attitude
4.class属性控制
ele.classList.add("c3")
ele.classList.remove("c2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: rebeccapurple;
}
.c2{
color: white;
} .c3{
font-size: 28px;
}
</style>
</head>
<body> <div class="c1">Yuan</div> <script>
var ele=document.getElementsByClassName("c1")[0];
ele.classList.add("c3");
ele.classList.remove("c1") </script>
</body>
</html>
class属性控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li,ul{
list-style: none;
} .box{
width: 100%;
height: 600px; }
.box .left{
float: left;
width: 20%;
height: 100%;
background: #a3a3a3;
}
.box .right{
float: right;
width: 80%;
height: 100%;
background: #829094;
}
.box .left .item{
width: 100%;
/*height: 120px;*/
margin-bottom: 5px;
}
.box .left .item p{
width: 100%;
height: 30px;
background: red;
} .hide{
display: none;
} </style>
</head>
<body>
<div class="box">
<div class="left">
<div class="item">
<p class="target">菜单一</p>
<ul class="it hide">
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
<div class="item">
<p class="target">菜单二</p>
<ul class="it hide">
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</div>
<div class="item">
<p class="target">菜单三</p>
<ul class="it hide">
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
</div> </div>
<div class="right">
</div> </div> <script>
//找到需要绑定事件的标签
var p_lst = document.getElementsByClassName("target");
for (var i=0;i<p_lst.length;i++){
p_lst[i].onclick = function () {
//把自己的下一个兄弟节点属性，设置为显示 this.nextElementSibling.classList.remove("hide");
//将其他兄弟节点属性，设置为隐藏
for (var j=0;j<p_lst.length;j++){
if(p_lst[j] !==this){
p_lst[j].nextElementSibling.classList.add("hide");
}
} }
} </script>
</body>
</html>
菜单栏
5.css控制
var ele=document.getElementsByClassName("c1")[0];
ele.style.color="red";
ele.style.fontSize="38px"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d" id ="d">
python
</div>
<script>
//css 操作
// var d = document.getElementsByClassName("d")[0];
var d =document.getElementById("d");
d.style.width ="200px";
d.style.height ="200px";
d.style.fontSize="20px";
d.style.color = "green";
d.style.border ="1px solid";
d.style.background ="red";
</script>
</body>
</html>
ccs属性控制
49 BOM 和DOM的更多相关文章
- BOM，DOM，ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- BOM和DOM的区别和关联
BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...
- 实现JavaScript的组成----BOM和DOM
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...
- BOM和DOM详解
DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- 前端之BOM和DOM
BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...
- BOM和DOM的区别
一.BOM和DOM之间的关系图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象由于window是顶层对象,因此调用它的子对象时可以不显示的指明 ...
- 前端基础之BOM和DOM
关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser object Model)是指浏览器对象模型,它使JavaScript有能力 ...
随机推荐
- 机器学习、深度学习以及人工智能正在快速演进（ML、DL、AI）
机器学习.深度学习以及人工智能正在快速演进 机器学习.深度学习和人工智能(ML.DL和AI)是彼此相关的概念,他们正在改变不知多少行业,改变其自身管理模式,同时改变做出决策的方式.显然,ML.DL和A ...
- 干货：Java并发编程系列之volatile（二）
接上一篇<Java并发编程系列之synchronized(一)>,这是第二篇,说的是关于并发编程的volatile元素. Java语言规范第三版中对volatile的定义如下:Java编程 ...
- jquery中的load方法加载页面无法缓存问题
在A页面中调用JQuery中的load方法,加载另一个B页面,B页面中的样式文件和JS文件无法从浏览器缓存中获取,每次都是实时获取.这是因为B页面的HTML经load方法处理后,会为每个样式和JS文件 ...
- js常量
原文链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const const 声明创建一个 ...
- 20165310_JavaExp1
20165310_JavaExp1_Java开发环境的熟悉 一.Exp1 Exp1_1 实验目的与要求: 使用JDK编译.运行简单的Java程序: 使用Vim进行Java源代码编译: 利用Git上传代 ...
- 探索Java8：(二)Function接口的使用
Java8 添加了一个新的特性Function,顾名思义这一定是一个函数式的操作.我们知道Java8的最大特性就是函数式接口.所有标注了@FunctionalInterface注解的接口都是函数式接口 ...
- Problem F: 等式
Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 104 Solved: 22[Submit][Status][Web Board] Descriptio ...
- python中的迭代器和生成器学习笔记总结
生成器就是一个在行为上和迭代器非常类似的对象. 是个对象! 迭代,顾名思意就是不停的代换的意思,迭代是重复反馈过程的活动,其目的通常是为了逼近所需目标或结果.每一次对过程的重复称为一次“迭代”,而 ...
- Ansible 入门指南 - 学习总结
概述 这周在工作中需要去修改 nginx 的配置,发现了同事在使用 ansible 管理者系统几乎所有的配置,从数据库的安装.nginx 的安装及配置.于是这周研究起了 ansible 的基础用法.回 ...
- git如何生成指定两个commit之间的补丁
答:git format-patch <base commit id>..<latest commit id> 如git log输出以下内容: commit 2222222 y ...