DOM操作
JavaScript组成
- ECMAScript：javascript核心
- DOM：文档操作
- BOM：浏览器对象
DOM
概念：
文档对象模型，网页解析过程中，会将所有标签整合起来看成一个document对象。这个对象里面包含各种操作元素的api。
DOM树
注意：每个html标签就是一个节点，其中属性和文本都是一个节点
- 元素节点
- 属性节点
- 文本节点
DOM 基本操作
获取节点
通过id获取元素
<body>
<div id="app"></div>
</body>
<script>
var odiv = document.getElementById('app')
console.log(odiv); //一个元素
</script>运行结果
document.getElementByClassName()
通过class名获取元素（获取的一组类数组）
<body>
<div id="app"></div>
<p class="p">这是p标签</p>
<p class="p">这是p标签</p>
<p class="p">这是p标签</p>
<p class="p">这是p标签</p>
<p class="p">这是p标签</p>
</body>
<script>
var odiv = document.getElementById('app')
console.log(odiv); //一个元素
var op = document.getElementsByClassName('p')
console.log(op); //获取一组节点 是类数组
</script>document.getElementByTagName()
通过标签名获取元素（获取的一组类数组）
<body>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
<script>
var span_new = document.getElementsByTagName('span')
console.log(span_new);
</script>
更多
document.querySelector() (很常用的)
通过css选择器进行查询html标签（获取一个元素，或满足条件的第一个元素）
<body>
<div id="app"></div>
<p class="p">这是p1标签</p>
<p class="p">这是p2标签</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
<script>
var odiv1 = document.querySelector('#app')
console.log(odiv1);
var op1 = document.querySelector('.p')
console.log(op1);
var span_new = document.querySelector('span')
console.log(span_new);
</script>
document.querySelectorAll() (很常用的)
通过css选择器进行查询html标签（获取一组元素）
<style>
#app{
width: 200px;
height: 20px;
background-color: pink;
border: 1px solid #bdcdbd;
}
</style>
</head>
<body>
<div id="app"></div>
<p class="p">这是p1标签</p>
<p class="p">这是p2标签</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
<script>
var odiv2 = document.querySelectorAll('#app')
console.log(odiv2);
var op2 = document.querySelectorAll('.p')
console.log(op2);
var span_new = document.querySelectorAll('span')
console.log(span_new);
模板字符串（扩展）
通过`` 来定义字符串， 和单引号 双引号 类似。
var str = `这是一个字符串 `
- 只要写在两个飘以内 都是字符串，可以任意格式
<script>
var str = `
这
是
一
个
字
符
串
`
console.log(str)
</script>
- 可以使用变量
<script>
var name = prompt('请输入姓名')
var str2 = `我叫${name}`
console.log(str2);
</script>
操作标签内容
流程：
- 获取标签
- 进行内容修改或者查看
操作标签中的HTML代码
var app = document.querySelector('#app')
app.innerHTML = '<h1>你好，我在往app标签中添加文本</h1>'
console.log(app.innerHTML);
注意：如果是一个元素可以直接使用变量名进行操作，如果获取的是类数组，那么需要通过下标操作元素
案例：数据驱动
var news = ['娱乐新闻','军事新闻','财经新闻']
var oul = document.querySelector('ul')
console.log(oul.innerHTML);
var html = ''
for(var i=0;i<news.length;i++){
//console.log(news[i]);
html += `<li>${news[i]}</li>`
}
console.log(html);
oul.innerHTML = html;
innerText
<body>
<div>
<p>111</p>
<span>222</span>
</div>
</body>
<script>
var div = document.querySelector('div');
console.log(div.innerHTML);
console.log(div.innerText);
</script>
<body>
<div>
<p>111</p>
<span>222</span>
</div>
</body>
<script>
var div = document.querySelector('div');
// console.log(div.innerHTML);
// console.log(div.innerText);
div.innerText = '<h1>设置文本(将之前div里的内容替换了)</h1>'
</script>
操作属性
getAttribute获取属性
-
<style> .div1{ width: 100px; height: 100px; background-color: pink; } </style> <body> <div id="app" class="div1" index="1" ></div> </body> <script> var div = document.querySelector('div') console.log(div.getAttribute('id')); console.log(div.getAttribute('class')); console.log(div.getAttribute('index')); </script>
setAttribute修改属性
-
.div1{ width: 100px; height: 100px; background-color: pink; } .div2{ width: 100px; height: 100px; background-color: #dd5c25; } </style> <body> <div id="app" class="div1" index="1" ></div> </body> <script> var div = document.querySelector('div') div.setAttribute('id','bbb') div.setAttribute('class','div2') div.setAttribute('index','2') console.log(div.getAttribute('id')); console.log(div.getAttribute('class')); console.log(div.getAttribute('index')); </script>
删除属性 removeAttribute
测试代码
<body>
<div id="aaa" class="div1" index="1">
</div>
</body>
<script>
var div = document.querySelector('div')
div.removeAttribute('index')
</script>测试结果
添加节点
-
innerHTML
-
使用api进行添加节点
创建节点 createElement odiv.insertBefore(ospan,op) //创建节点 var op = document.createElement('p') //添加节点到元素内部 appendChild //给元素添加一个儿子 添加到里面并且是最后一个 odiv.appendChild(op) //添加到节点内部，并指定添加到哪个元素前面 insertBefore
删除节点
-
删除当前元素 remove()
元素节点.remove() //删除调用该方法的元素 -
删除指定的子元素 removeChild()
var oli = document.querySelector('#app') var oul = document.querySelector('ul') oul.removeChild(oli)
- innerHTML 删除父元素内部的所有元素
odiv.innerHTML = ''
//遍历获取的元素执行 remove() 或者 removeChild()
var lis = document.querySelectorAll('li')
for(var i=0 ; i<lis.length;i++){
lis[i].remove()
}
for(var i=0 ; i<lis.length;i++){
oul.removeChild(lis[i])
}获取父，子，兄弟节点(了解)
-
父节点
parentElementvar odiv = document.querySelector('div') console.log(odiv.parentElement); -
子节点
注意：
firstChildlastChild获取节点容易获取到空文本节点。
firstChild 第一个子元素
console.log(odiv.firstChild);
lastChild最后一个子元素
console.log(odiv.lastChild);-
children` 所有子元素
console.log(odiv.children); -
兄弟节点
console.log(odiv.previousSibling);
事件
用户与页面之间的所有操作，我们都称为交互，每一个动作都是一个事件。
事件三要素
- 事件源：触发事件的元素，必须是某个具体的节点
- 事件类型：什么动作触发的事件
- 点击
- 双击
- 鼠标移入
- 键盘点击
- .......
- 事件处理函数：事件触发后，具体的执行代码
DOM事件发展
DOM0级和1级：直接砸标签上进行添加事件，和内联css一样
DOM2级：添加事件到js获取的元素上。
var odiv = document.querySelector('div')
// DOM2级的方式进行绑定事件
odiv.onclick = function(){
console.log(111);
}DOM3级：绑定事件到节点上
odiv.addEventListener('click',function(){
console.log(2222);
})
odiv.addEventListener('click',function(){
console.log(1111);
})- 可以绑定多个事件
取消事件
- DOM0级 (清除事件)
-
//使用removeAttribute odiv.removeAttribute('onclick') - DOM2级（清除事件）
-
//使用null odiv.onclick = null - DOM3级
-
//使用removeEventListener() function play(){ console.log(1111); } function play2(){ console.log(2222); } odiv.addEventListener('click',play) odiv.addEventListener('click',play2) odiv.removeEventListener('click',play2)
2289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
