javascript 基础学习（DOM）（四）

最新推荐文章于 2023-04-13 18:25:06 发布

罗罗诺亚丶索隆

最新推荐文章于 2023-04-13 18:25:06 发布

阅读量377

点赞数

分类专栏：前端html css js学习文章标签： js javascript dom

本文链接：https://blog.csdn.net/qq_36802214/article/details/119607468

版权

前端html css js学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

DOM简介

1、DOM树

HTML DOM Node Tree

文档：一个页面就是一个文档，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 ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
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)

罗罗诺亚丶索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 基础学习（DOM）（四）

DOM简介1、DOM树文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM 中使用element表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node表示DOM把以上内容都看做是对象2、获取元素2.1、HTML5获取元素的方法 //2009 发布的ECMASCRIPT的标准 //通过标签名称获取多个元素 var h1...
复制链接

扫一扫