js原生DOM操作
js原生DOM操作
---------------获取节点
---------------创建添加和删除
---------------操作节点内容和节点属性
---------------按钮点击事件
----------------窗口基本操作
一、获取节点
<!-- 1.什么是节点 - js中所谓的节点就是html中的标签 -->
<!-- 2.获取节点 - 用js获取标签
1)直接获取节点
document.getElementById():获取所有id值为指定值的标签
document.getElementsByClassName('c1'):获取所有class值为指定值的标签
var result2 = document.getElementsByTagName('a'):获取所有的指定标签
注意:用js代码操作标签的时候,那么js代码必须要在需要操作的标签后面
-->
<!--js中定义变量:
全局:变量名 = 数据
函数体:var 变量名 = 数据
let 变量名 = 数据-->
<!-- 获取标签需要掌握:根据id属性、class属性和标签获取标签;已经获取到一个标签以后,怎么通过这个已经拿到的标签获取它的父标签、所有的子标签、第一个子标签和最后一个子标签 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class="c1">我是段落1</p>
<div id="box1">
<a href="" class="c1">我是超链接1</a>
<p id="p1">我是段落2</p>
<div id="box2">
<p class="c1">我是段落3</p>
<a href="">我是超链接2</a>
<span>我是span1</span>
</div>
</div>
</body>
</html>
<!--------------- 1.直接获取标签 ----------------->
<script>
//1)获取网页中id属性为p1的标签
p1=document.getElementById('p1')
console.log(p1)
//2) 获取所有class属性值为c1的标签,返回一个容器
var result = document.getElementsByClassName('c1')
console.log(result)
// 获取容器中下标为0的元素
// console是打印
console.log(result[0])
// 3)获取所有的a标签
var result2 = document.getElementsByTagName('a')
console.log(result2)
</script>
<!---------------- 2.获取父子节点 ------------------>
<script>
var div2 = document.getElementById('box2')
// 1)获取父节点:节点对象.parentElement
var result = div2.parentElement
console.log(result)
// 2)获取所有的子节点:节点对象.children
var result = div2.children
console.log(result)
// 3)获取第一个子节点:节点对象.firstElementChild
var result =div2.firstElementChild
console.log(result)
// 4)获取最后一个子节点:节点对象.lastElementChild
var result = div2.lastElementChild
console.log(result)
</script>
二、创建添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box1">
<p>我是段落1</p>
</div>
<div id="box2">
<a href="">我是超链接1</a>
</div>
</body>
</html>
<!-------------------- 1.创建和添加 --------------------->
<script>
// 1.创建节点:document.createElement('标签名')
// 创建一个div标签
div1 = document.createElement('div')
// 创建一个a标签
a1 = document.createElement('a')
// 2.添加标签
// 1)节点对象1.appendChild(节点对象2) - 在节点1中的最后添加节点2,节点1是节点2的父标签
// document.getElementsByTagName('body') // 得到的是一个容器
body = document.getElementsByTagName('body')[0]
box1 = document.getElementById('box1')
box2 = document.getElementById('box2')
body.appendChild(div1)
box2.appendChild(a1) //只能在一个地方添加,再添加到其他地方,之前添加的位置变无效
// 2)节点对象1.box2.insertBefore(节点对象2,节点对象3) - 将节点2插入到节点1中节点3的前面(1和2是父子关系,2和3是兄弟关系)
box2.insertBefore(a1,box2.firstElementChild)
box2.insertBefore(div1,box2.laseElementChild)
</script>
<!----------------- 2.删除标签 ---------------------->
<script>
// 删除原则:找到需要删除的标签,执行删除操作
// 节点.remove() - 删除指定节点
var p1 = box1.firstElementChild
p1.remove()
</script>
三、操作节点内容和节点属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>我是段落1 <b>加粗的段落</b> </p>
<img src="img/小柯基(1).png" alt="">
<input type="text" value="张三">
<a href="https://www.百度.com">百度</a>
<div id="box1"></div>
</body>
</html>
<script>
// 1.获取和修改双标签的标签内容
// 1)获取标签内容
// 节点.innerText - 获取标签的标签内容(只获取内容部分的纯文字内容)
// 节点.innerHTML - 获取标签的标签内容(所有内容)
var p1 = document.getElementsByTagName('p')[0]
console.log(p1.innerText)
console.log(p1.innerHTML)
// 2)修改标签内容
p1.innerText = 'hello world!<b>加粗的段落</b>' //得到hello world!<b>加粗的段落</b>
// p1.innerHTML = 'hello world!<b>加粗的段落</b>' //得到hello world!加粗的段落
// 2.获取和修改标签属性
// 1)获取属性:节点.html属性名
// 2)修改属性:节点.html属性名 = 属性值
var a1 = document.getElementsByTagName('a')[0]
console.log(a1.href)
var i1 = document.getElementsByTagName('input')[0]
console.log(i1.type,i1.value)
a1.innerText='京东'
a1.href='https://www.jd.com'
i1.value='哈哈'
// 3.修改标签的样式
// 设置文字颜色为红色,字体大小为20像素
// a1.style= 'color:red; font-size:20px;'
a1.style.fontSize='20px'
a1.style.color='red'
p1.style.border='1px solid blue'
p1.style.backgroundColor='rgb(107,107,107)'
</script>
<!-- 案例:创建添加的实际应用 -->
<script>
var box1=document.getElementById('box1')
// 创建p标签
var p1 =document.createElement('p')
// 添加标签内容和属性
p1.innerText='你好'
p1.className='c1'
// 修改样式
// p1.style.width='100px'
// p1.style.height='200px'
// p1.style.backgroundColor='yellow'
// p1.style.color='pink'
p1.style='width: 200px;height: 60px;background-color: yellow;color: blue;font-size:20px;4'
box1.appendChild(p1)
</script>
四、按钮点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box"></div>
<hr>
<input type="text">
<button onclick="addTag()">添加</button>
<button onclick="delTag()">删除</button>
</body>
</html>
<script>
var p1=document.getElementById('box')
var i1 =document.getElementsByTagName('input')[0]
// 封装固定写法 addTag是自己根据代码功能起的名字,需要和按钮onclick的值一致
// 这个里面的代码就是每次点击按钮的时候会执行的代码
function addTag(){
var p1=document.createElement('p')
p1.innerText=i1.value
box.append(p1)
} //功能:每点击一次添加输入内容
function delTag(){
p2=box.lastElementChild
p2.remove()
} //功能:每点击一次,删除最后一行的数据
</script>
五、窗口基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="addNewWindow()">打开新的窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
<hr>
<button onclick="popOut1()">弹框1</button>
<button onclick="popOut2()">弹框2</button>
<button onclick="popOut3()">弹框3</button>
</body>
</html>
<!----------------- 窗口相关操作 ------------------->
<script>
// 1.打开新的窗口
// open() - 创建一个新的空白窗口,返回一个窗口对象
// open(地址) - 创建一个新的窗口,打开指定的页面,返回一个窗口对象
// open(地址,'','width=?,height=?') - 创建一个新的窗口,窗口大小是指定大小
function addNewWindow(){
// w1=open()
// w2=open('https://www.百度.com')
w3=open('https://www.百度.com','','width=500,height=400')
// 单独设置过大小的窗口可以移动
w3.moveTo(100, 100)
}
// 2.关闭窗口
function closeWindow(){
// 1)关闭指定窗口:窗口对象.close()
w3.close()
// 2)关闭当前窗口
// close()
}
</script>
<!------------------- 弹框相关操作 -------------------->
<script>
// 1.只有提示信息和确定按钮的弹框
// alert(提示信息)
function popOut1(){
alert('登录成功')
}
// 2.一个问题加确定和取消按钮的弹框
// confirm('提示信息') - 如果用户点击的是确定按钮,返回true;否则返回false
function popOut2(){
var result = confirm('是否确定要删除这个商品?')
// console.log(result)
if(result==true){
// 确定的时候要执行的操作
}else{
// 取消时候要执行的操作
}
}
// 3.带一个提示信息,一个确定按钮,一个取消按钮和一个输入框
// prompt(提示信息,输入框默认内容) - 如果用户点击的是取消按钮,返回null,如果点确定返回输入框内容
function popOut3(){
var result=prompt('请输入水果名称','苹果')
console.log(result)
if(result == null){
// 取消对应的代码
}else{
// 确定对应的代码
}
}
</script>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhcicggj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13