JavaScript DOM 操作
JavaScript DOM 操作
-
DOM 文档对象模型( document object Model )
-
操作DOM的三步走 1.获取事件源 2.调用事件 3.逻辑处理（业务逻辑）
博客: https://www.cnblogs.com/majj
加载方式
-
窗口加载
1.先去加载文档 2.图片再去加载
<script> // 如果 script 在head 标签中加载 使用 window.onload window.onload = function () { 代码块 } </script>
document.write("****") // 输出到页面中
console.dir() // 查看所有方法
// 基本对象
console.log(window); // 窗口: window 它是一个全局的对象 window
console.dir(document); // 文档: 整个html页面 document
console.log(document.documentElement); // 获取 html 标签
console.log(document.body); // 获取body 标签
获取DOM 的三种方式
三种方式获取body之下的所有DOM对象
-
通过id获取
//div#app id是唯一的 var oDiv = document.getElementById('app');//单个对象 -
通过标签名获取
//a span div li var oLis = document.getElementsByTagName('li');//多个对象 -
通过类名获取
//div.active p.active var oActive = document.getElementsByClassName('active');//多个对象
获取DOM的救命稻草
document.querySelectorAll('css所学的所有选择器')
// 不管获取单个还是多个元素怒,那么获取的是NodeList对象,此对象中
// 1.通过id获取
var oDiv = document.getElementById('box');
console.log(oDiv);
// 2.通过标签获取 获取是伪数组 多个DOM对象
var oTag = document.getElementsByTagName('div')[0];
//HTMLCollection 伪数组 有数组的索引和length,但是没有数组的方法
console.log(oTag);
oTag.style.color = 'red';
// 3.通过类名获取 获取的也是伪数组 多个DOM对象
var oActives = document.getElementsByClassName('box');
console.log(oActives);
//救命稻草
var oD = document.querySelectorAll('div p');
console.log(oD);
页面中的DOM属性
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
- 控制滚动条的 滚动
window.scrollBy(0, document.body.scrollHeight) // 滚动到最底层
js中的事件
- onclick 单击事件
- ondblelick 鼠标双击
- onmouseover 鼠标移入 鼠标移入到父标签或子标签会触发事件
- onmouseout 鼠标移出
- onmouseenter 鼠标进入 鼠标进入父标签的时候会触发事件
- onmouseleave 鼠标离开
- onload 文档加载
- onunload 关闭网页时
- onkeyup 按下并释放键盘上的一个按键时触发
- onchange 文本内容或下拉菜单中的选项发生改变时
- onfocus 获得焦点 表示文本框等获得鼠标光标
- onblur 失去焦点 表示文本框等失去鼠标光标
- onresize 窗口大小发生变化时
- onreset 重置表单时
- onsubmit 表单提交事件
- window.onscroll 监听滚动事件
window.onload = function () {
document.getElementById('btn').onclick = function () {
alert("点击事件 onclick");
}
document.getElementById('btn').onmouseover = function () {
console.log('鼠标悬停了 onmouseover');
}
document.getElementById('btn').onmouseout = function () {
console.log('鼠标离开了 onmouseout');
}
// document.getElementById('btn').onmouseenter = function(){
//
// }
// document.getElementById('btn').onmouseenter = function(){
//
// }
}
对标签值得操作
var oDiv = document.getElementById('box');
document.write('既可以放文本又可以放标签+文本');
//闭合标签设置文本的内容 <p></p>
oDiv.innerText //获取值
oDiv.innerText = 'alex' //设置值
//设置html+文本内容
oDiv.innerHTML //获取值
oDiv.innerHTML = '<p>哈哈哈</p>'; //虽然可以写入 但是注意标签嵌套
//只获取所有(当前标签和子标签)文本内容
console.log(oDiv.innerText);
//获取父标签中所有的标签元素 (子标签,空格,换行,文本)
console.log(oDiv.innerHTML);
//设置value值 只适应于表单控件元素
document.getElementById('user').value = 'alex';
console.log(document.getElementById('user').value);
对css 样式的操作
- xxx.style.css的属性key = '值'
var oDiv = document.getElementsByClassName('box')[0];
var isRed = true;
oDiv.onclick = function () {
if (isRed) {
console.log(this.style);
//this 谁做的事件操作 this指向谁
this.style.backgroundColor = 'green';
this.style.width = '400px';
isRed = false;
} else {
this.style.backgroundColor = 'red';
isRed = true;
}
}
对标签属性的操作
var oDiv = document.getElementsByClassName('box')[0];
var oBtn = document.getElementById('botton');
var isShow = true;
//不等待
//获取标签属性的值
oDiv.getAttribute('class');
//设置标签属性的值
oDiv.setAttribute(key,value);
oDiv.setAttribute('class','active');
//不仅我们可以使用标签自带的属性,
//什么是最好的?
oBtn.onclick = function () {
if (isShow) {
// 对id 对标签赋值id
oDiv.id = 'box';
oDiv.title = '哈哈哈';
console.log(oDiv.className); //box
//设置类名的时候 一定要用className 因为class是个关键字
oDiv.className = oDiv.className + ' active';
isShow = false;
}else{
oDiv.className = 'box';
isShow = true;
}
}
img 标签属性的操作
<div class="swiper">
<span id="next"></span>
<img src="./1.png" alt="" id="meinv">
</div>
<script>
var oImg = document.getElementById('meinv');
console.dir(oImg);
var oNext = document.getElementById('next');
oImg.onmouseover = function () {
//this.src 获取的是DOM对象的属性
console.log(this.src); //绝对路径
//获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性
console.log(this.getAttribute('src'));
this.src = '1_hover.png';
this.alt = '哈哈哈'
}
oImg.onmouseout = function () {
this.src = '1.png'
}
oNext.onmouseover = function () {
// console.log( this.style);
this.style.backgroundPositionX = '-42px';
this.style.backgroundPositionY = '0';
}
</script>
对象属性的操作
oDiv.id
oDiv.className
oDiv.title
oImg.src //如果通过对象属性获取是绝对路径 对象的属性值
oImg.alt
oAnchor.href
oAnchor.target
oRadio.checked //如果选中,通过对象属性获取的值是 true
区分DOM对象属性和标签属性
//this.src 获取的是DOM对象的属性
console.log(this.src); //绝对路径
//获取出来的就是标签上的属性 通过getAttribute('');获取的标签上的属性
console.log(this.getAttribute('src'));
对象属性标签属性区分
console.log( $('nan').checked); //对象的属性 单选框 提交后台 建议使用对象属性checked
console.log( $('nan').getAttribute('checked')); //标签上属性
显示隐藏的2种方式
1.可以通过控制css的style样式 对指定的DOM对象 设置属性 display:none|block;
2.通过控制className,来对元素显示隐藏,判断该标签是否由class='active',如果有active表示显示,没有active表示隐
博客: https://www.cnblogs.com/majj/category/1223635.html
DOM的操作(创建,追加,删除)
- Div_tag.parentNode 获取父级标签 所有的内容
- Div_tag.children 获取所有的子标签
- Div_tag.nextElementSibling 获取下一个兄弟节点
- Div_tag.firstElementchild 子标签的节点
- Div_tag.lastElementchild 子标签的节点
创建 createElement()
//既可以创建已有的标签,还可以创建自定义的标签
var oDiv = document.createElement('div')
追加 appendChild()
父.appendChild(oDiv);
插入insertBefore()
父.insertBefore(新的子节点,要参考的节点)
删除 removeChild()
父.removeChild(子节点);
自己.parentNode.removeChild(自己)
- 网页中显示隐藏性能消耗问题
1.可以通过控制元素的类名或者是style属性,对元素进行显示隐藏
好处: 可以在网页中频繁性的切换,主要控制的是display:none|block;
坏处: 文档初始化会有渲染开销,但是这点开销不算什么.
2.通过DOM操作 appendChild和removeChild 对元素显示隐藏
好处:文档初始化的时候不会产生渲染开销
坏处: 不要在网页中做频繁性的切换,会产生性能消耗
<!--行内的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function () {
// open('https://www.baidu.com');
//打开空白页面
open('about:blank', "_self")
};
closeBtn.onclick = function () {
if (confirm("是否关闭？")) {
close();
}
}
</script>
