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);
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对象
1.获取HTML
功能
用js修改样式
修改里面的内容
添加事件
查询标签
var d = document.querySelector("选择器")
2.删除HTML
清空标签/插入标签
xx.innerHTML = "";
3.替换HTML
创建日期对象
获取当前日期
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();