DOM简介
1、DOM树
文档:一个页面就是一个文档,DOM中使用 document 表示
元素:页面中的所有标签都是元素,DOM 中使用 element 表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
DOM 把以上内容都看做是对象
2、获取元素
2.1、ES5获取元素的方法
1、通过标签名称获取多个元素
document.getElementsByTagName('元素名')
2、通过ID名称获取元素
document.getElementById("ID名称")
3、通过属性class获取多个元素
document.getElementsByClassName("class名称")
2.2、es6获取元素
1、返回最先匹配到的第一个对象
document.querySelector('选择器')
2、获取所有匹配到的元素对象
document.querySelectorAll('选择器')
例:选择器写法 #nav .nav
2.3、获取关系DOM元素
获取元素的父元素parentNode / parentElement
获取子元素 children/childNodes
var d1 = document.querySelector('.d1');
var first = d1.children[0]
//d1.firstElementChild,获取第一个元素
var last = d1.children[d1.children.length-1]
//d1.lastElementChild,获取最后1个元素
获取兄弟元素的下一个元素,nextElementSibling
获取兄弟元素的上一个元素,previousElementSibling
2.4、获取特殊元素(body,html)
doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象
3、操作DOM元素
3.1 innerHTML innerText outerHTML
innerHTML获取元素内部的html代码
innerText获取元素内部的html代码
outerHTML获取包含元素名的内部tml代码
var d1 = document.querySelector('.d1');
//获取d1内部的html代码
console.log(d1.innerHTML)
//获取d1内部的文本内容
console.log(d1.innerText)
//获取包含d1的HTML代码
console.log(d1.outerHTML)
改变元素内容
d1.innerText = "child4"
d1.innerHTML = "<img src='../1获取dom元素/img/cxk.jpg'>"
3.2、操作元素
创建元素
document.createElement('h1')
追加子元素
d1.appendChild(h1)
在什么前面插入元素
body.insertBefore(img,d3)
删除元素
body.removeChild(d2)
克隆节点
node.cloneNode()
例:
//1创建元素
var h1 = document.createElement("h3");
//2设置元素
h1.innerHTML = "中午吃啥?"
//3插入元素,首页要找到被插入的元素
var d1 = document.querySelector(".d1");
//4追加子元素
d1.appendChild(h1)
//在什么前面插入元素
//创建img元素
var img = document.createElement('img')
//设置img的src属性
img.src = "img/cxk.jpg"
console.log(img)
//找到被插入的父元素,<body>
var body = document.querySelector('body')
//在body的d3前插入内容
var d3 = document.querySelector('.d3')
body.insertBefore(img,d3)
//d3.parentElement.insertBefore(img,d3)
//删除元素
//1找到被删除的父元素
var body = document.querySelector('body')
//2找到要删除的元素
var d2 = document.querySelector('.d2')
//3删除,父元素.removeChild(子元素)
body.removeChild(d2)
//d2.parentElement.removeChild(d2)
var img2 = img.cloneNode()
//将图追加到d5
var d5 = document.querySelector('.d5')
d5.appendChild(img2)
3.3、操作元素属性
获取属性值
element.getAttribute('属性');
设置属性值
element.setAttribute('属性', '值');
移除属性
element.removeAttribute('属性');
例:
var d1 = document.querySelector("#d1");
console.log(d1.getAttribute('id'))
//设置属性值
d1.id = "d2"
d1['id'] = "d3"
//setAttribute("属性名称","属性值")
d1.setAttribute("id","d4")
var img = document.querySelector('#img1')
img.setAttribute("src","../1获取dom元素/img/cxk.jpg")
//d1.abc = "789";//默认元素中如果没有此属性,那么此属性只会创建在对象中,不会显示在元素的html上
d1.setAttribute("abc","789")///默认元素中如果没有此属性,那么此属性不会创建在对象的属性中,会显示在html的属性中.
//删除子元素
d1.removeAttribute("abc")
3.4、修改样式
element.style 行内样式操作
element.className 类名样式操作
//1通过style属性修改样式
var d1 = document.querySelector('#d1');
console.log([d1])
d1.style.width = "200px";
d1.style.height = "200px";
d1.style.backgroundColor = "purple"
//注意:1通过style属性设置的值,优先级是最高的,因为是直接修改标签的style属性
//2在设置css属性的时候,如果css属性是由多个单词组成,那么js中就需要使用驼峰命名的形式进行调用和设置
//2通过修改className,从而修改样式
var d2 = document.querySelector("#d2")
d2.className = "redBg bigFont";
//注意:修改类名还可以通过classlist属性的add/remove/replace进行修改className
d2.classList.add("shadow")
d2.classList.replace("bigFont","smallFont")
d2.classList.remove("redBg")
3.5、创建元素
document.write()
element.innerHTML
document.createElement()
-
document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,会导致页面全部重绘
-
innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
-
innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
-
createElement() 创建多个元素效率稍低一点点,但是结构更清晰
4、事件
4.1、鼠标事件
鼠标事件对象
//当获取焦点事件
inputDom.onfocus = function(e){
console.log(e)
}
//当失去焦点事件
inputDom.onblur = function(e){
console.log(e)
var x = e.pageX;
var y = e.pageY;
}
4.2、键盘事件
inputDom.onkeydown = function(event){
console.log(event)
showCodeDiv.innerHTML = event.key //获取点击键盘的值
}
//键盘按下事件
inputDom.onkeypress = function(){
console.log(event)
}
//键盘弹起事件
inputDom.onkeyup = function(){
console.log(event)
}
4.3、addEventListener
eventTarget.addEventListener(type, listener[, useCapture]);
type
:事件类型字符串,比如 click 、mouseover ,注意这里不要带 onlistener
:事件处理函数,事件发生时,会调用该监听函数useCapture
:可选参数,是一个布尔值,默认是 false 意为使用捕获
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);//鼠标经过
x.addEventListener("click", mySecondFunction);//点击
x.addEventListener("mouseout", myThirdFunction);//鼠标离开
5、时间对象
//创建当前的时间
var time = new Date()
//获取年份
var y2 = time.getFullYear()
console.log(y2)
//获取月份,月份计算是从0开始计算,所以会比正常的月份小1
var month = time.getMonth()
console.log(month+1)
//获取月份里的第多少天
var date = time.getDate()
console.log(date)
//获取周几
var day = time.getDay()
console.log(day)//1-7
//获取小时
var hour = time.getHours()
console.log(hour)//24小时制
//获取分钟
var minute = time.getMinutes()
console.log(minute)
//获取秒
var sec = time.getSeconds()
console.log(time.getSeconds())
//获取毫秒
var milsec = time.getMilliseconds()
console.log(milsec)
//获取时间戳:1970,1,1到现在的毫秒数
console.log([time])
//设置设置时间
//设置年份
time.setFullYear(2018)
console.log(time)
//设置月份
time.setMonth(0)
console.log(time)
//设置第多少天
time.setDate(1)
console.log(time)
//设置小时
time.setHours(0)
console.log(time)
//设置分钟
time.setMinutes(0)
//设置秒
time.setSeconds(0)
//设置毫秒
time.setMilliseconds(0)
console.log(time)
//设置时间戳,通过时间戳设置时间.
document.body.innerHTML =//time.toTime()//2019-10-22 14:30:31
console.log(time)