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);
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>