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有能力 ...
随机推荐
- linux常见命令ps的应用
ps(Process Status)命令是linux中最常见的命令之一,它用来列出当前系统运行中的进程的状态信息.当然了,它只显示命令执行时的进程状态,如果想要动态列出状态信息,可以选择使用top命令 ...
- MySQL数据库----触发器
触发器-trigger 触发器:监视某种情况,并触发某种操作. 使用触发器可以定制用户对表进行[增.删.改]操作时前后的行为,注意:没有查询 -- 触发器:某种程序触发了工具的运行 -- 触发器不能主 ...
- Confluence5.8部分空间名称显示为问号的解决方案
Confluence5.8部分空间名称显示为问号的解决方案 原因: 连接MySQL的时候,有没有在连接串中指定&useUnicode=true&characterEncoding=ut ...
- c++继承、多态以及与java的行为差异之处
对于面向对象而言,多态是最有用的基本特性之一,相对于函数指针,易用得多.下面看下c++继承和多态行为的基本特性,最后说明下和java的基本差别. 首先定义父类和子类. base.h #pragma o ...
- j2ee分布式缓存同步实现方案dlcache v1.0.1
j2ee分布式缓存同步实现方案dlcache v1.0.1 发布 修复问题: 1.支持两个层次的缓存,典型的用于产品大类.产品小类,数据字典以及子项: 更新后见: pan http://pan.bai ...
- Python descriptor 以及 内置property()函数
Python Descriptor 1, Python Descriptor是这样一个对象 它按照descriptor协议, 有这样的属性之一 def __get__(self, obj, type ...
- Linux 环境 HTTP 服务器
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <netinet/in ...
- TP/TCP/UDP
这两周我继续学习CCSDS协议栈中位于传输层较低位置的SCPS-TP协议,并且复习了TCP/IP体系中的TCP协议和UDP协议,通过学习和对比两个体系的协议,加深了我对SCPS-TP协议的认识和理解. ...
- 「不定期更新」MacOS 编辑器使用小技巧
Visual Studio Code Ctrl + CMD + 上下箭头:上下移动当前的代码块: Shift + Alt + 上下箭头:快速复制当前的代码块: 我最新欢的插件列表: Prettier: ...
- 利用Qt开发跨平台APP
本文将手把手教你如何在Windows环境下,使用Qt编译出安卓应用程序. Qt是一个优秀的跨平台开发工具.我们利用Qt可以很方便地将一次编写的应用,多次编译到不同平台上,如Windows.Linux. ...