回顾选择器
基础选择器
1.元素选择器
元素名(标签名)
如：
h1
div
a
span
input
form
option
select
2.id选择器
在html里面 使用id=“cc”
使用#来查找 id选择器
如：#cc
3.类选择器
在HTML里面使用class设置
在CSS和JS里面 查找 使用.类选择器的名字
如：.haha如：<div class = "haha"></div>
后代选择器
只要是 某个元素中的 子元素 都可以选择上
后代选择器是通过空格隔开的 如：.xx .title{}、div a{}、#ff .vv{}
两个选择器之间是有空格的
子类选择器
只能选择直接子元素
父元素的选择器>子元素的选择器
如：
.item>p
交集选择器
div.top
都包含
p.top
并集选择器
html,body
.top,.nav
属性选择器
input[type=password]
选择器名[属性名=属性值]
子类第几个元素
：first-child
：nth-child
注意分清交集和后代
1.查询DOM元素
1.document.querySelector("选择器")
查找到的是第一个元素
2.document.querySelectorAll("选择器")
伪数组
3.id选择器 document.getElementById("不需要加#");
4.通过类选择器查找document.getElementByClassName("div");
伪数组
5.通过元素名查找document.getElementByTagName("div");
伪数组
2.创建DOM元素
document.createElement("标签的名字")
步骤
1.创建dom元素
var 变量名= document.createElement("标签的名字")；
2.放内容
dom.innerText = "wenben"
放文本
dom.innerHTML = "<div>< img src="" ></div>"
放HTML里的字符串
dom.src="";
dom.appendChild(子元素)；
dom 不一定是父元素
3.放到父元素中
父元素.appendChild(dom);
<ul class="nav"></ul>
<script>
//在nav里面 创建一个li 里面放入 首页 文字
var nav = document.querySelector(".nav");
var li = document.createElement("li");
li.innerText = "首页";
nav.appendChild(li);
</script>
<ul class="goods"></ul>
//商品goods
var goods =document.querySelector(".goods");
var goodsItem = document.createElement("li");
goods.appendChild(goodsItem);
创建日期对象
获取当前日期
var date = new Date();
new 通过类名 创建对象的关键字
Date 日期类
通过日期类 -> 创建一个当前的日期对象
日期
年
月
得加1
日
周
大写的M
时
分
小写的M
秒
毫秒
获取将来 过去的时间（指定时间）
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000)；
时间戳
1970年-某个时间的 毫秒数
时间戳 转 日期对象
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
日期对象 转 时间戳
var date = new Date();
date.getTime();
JS操作HTML
1.创建 HTML
document.createElement("标签名");
如
var p = document.createElement("p");
属性
在js也同样可以获取或设置属性
如
div.style.opacity = 0.6;
var image = document.createElement("img");
image.src = "https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";
< img src="1.jpg">
注意：
创建完得标签 需要放到指定 才能显示
步骤
1.创建HTML标签
var image = document.createElement("img");
2.放到某个容器
document.body.appendChild(image);
拼接dom对象
2.获取HTML
功能
用js修改样式
修改里面的内容
添加事件
查询标签
var d = document.querySelector("选择器")
3.删除HTML
清空标签/插入标签
xx.innerHTML = ""；
4.替换HTML
1.窗口对象
window窗口包含的部分
浏览器可视的范围
1.导航
2.历史记录
3.屏幕大小
4.位置
窗口对象 是Window的实例对象
注意：
1.定义的全局变量
是定义到window对象上面的
可以通过window.xx访问
2.在最外面定义的函数
是定义到了window对象上面
可以通过window.xx访问
this 就表示-> window对象
尺寸
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
如果IE 5、6、7、8
document.documentElement.clientHeight
document.documentElement.clientWidth
事件
resize
屏幕尺寸发生改变的时候调用
load
等窗口里的资源 加载完成的时候调用
2.Location位置定位
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
80
web页面的默认端口
443
https
加密 超文本传输协议
普通的http不需要开启443
21
FTP
文件传输协议 fail
3306
mysql数据库默认
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.search 返回搜索的结果（http GET方法的参数）
页面之间传参
location.href
本页的位置
指定页面要跳转到的位置
端口号
