js 原生DOM操作

于 2020-12-23 19:36:46 发布
阅读量353 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： javascript 原生DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pyp_demon/article/details/111597328

目录

document

document.getElementsByTagName() 返回带有指定标签名的对象的集合

document.getElementsByTagName(标签名) 

方法1：返回带有指定标签名的对象的集合

方法2：当传入的值是个 * 号的时候，则获取全部的标签对象

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>
  <li>张三丰</li>
  <li>李明成</li>
  <li>方世玉</li>
  <li>王三炮</li>
  <li>赵友臣</li>
  <li>孙明玉</li>
  <li>吴三狗</li>
  <li>萧路严</li>


  <button class="btn">点击</button>

</body>

<script>

  $(function() {

    $("button.btn").click(function(){

      let docLi = document.getElementsByTagName('li') // 
      console.log(docLi)

      let doc = document.getElementsByTagName('*')
      console.log(doc)

    })

  })
</script>

</html>

addEventListener() 事件监听

规则：
document.getElementById(节点id).addEventListener(事件,function(){})

用于向指定元素添加事件句柄

注：
只能用于单一对象，如果获取的时数组对象，需要进行循环调用

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>
  <li>张三丰</li>
  <li>李明成</li>
  <li>方世玉</li>
  <li>王三炮</li>
  <li>赵友臣</li>
  <li>孙明玉</li>
  <li>吴三狗</li>
  <li>萧路严</li>


  <button class="btn" id="btnClick">点击</button>

</body>

<script>

  $(function() {

    document.getElementById("btnClick").addEventListener('click',function(){ // 点击
      console.log(1)
    })

    document.getElementById("btnClick").addEventListener('mouseover',function(){ // 鼠标移入
      console.log(2)
    })

  })
</script>

</html>

document.write 和document.writeln 往客户端添加文本

两者都是将文本添加到客户端中里面可以传N个参数

writeln第一次调用和第二次调用中间会多加一个 代码层面的换行符（浏览器中不显示换行效果）

write则是一行连续插入

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>

</body>

<script>

  document.writeln("张三李四王五马六")
  document.writeln("你们到底在哪里","在哪里啊，在哪里","在这里")
  document.writeln("多年不见甚是想念")

  document.write("多么开心的事情")
  document.write("是不是啊","我觉得不是")
  document.write("你们觉得呢")

</script>

</html>

效果：张三李四王五马六 你们到底在哪里在哪里啊，在哪里在这里 多年不见甚是想念 多么开心的事情是不是啊我觉得不是你们觉得呢

location 当前访问网页中的url部分的对象

location:主要包含的是当前url网页中的url部分的对象信息，可以直接通过 location进行访问

其中location也是window对象中的一个属性之一，可以使用 window.location进行访问

location.hash / window.location.hash 当前url的锚部分，即#及#后面的部分

获取：locaiton.hash   或 window.location.hash

替换：location.hash = "newHash"  或  window.location.hash = "windowHash"

使用location.hash操作后的地址切换，可以通过浏览器上方的返回按钮返回到上一页

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>

  <button class="btn">点击切换hash路由</button>

  <button class="newBtn">点击切换到window调取的hash路由</button>

</body>

<script>

  console.log(location.hash) // 假设访问域名中无#，则为''

  console.log(window.location.hash) // 假设访问域名中无#，则为''

  $(()=>{
    $('.btn').click(()=>{
      console.log(location.hash) // 假设访问域名中无#，则为''
      location.hash = '#newhash'
      console.log(location.hash) // #newhash ,并且浏览器中的访问域名中会新增 #newhash
    })

    $('.newBtn').click(()=>{
      console.log(window.location.hash) // 假设访问域名中无#，则为''
      window.location.hash = '#windowhash'
      console.log(window.location.hash) // #windowHash ,并且浏览器中的访问域名中会新增 #windowHash
    })
  })


</script>

</html>

history 对象中包含用户访问过的url

history 包含用户访问过的url，可以直接使用 history进行访问

也属于window对象中的属性之一，可以使用window.history进行访问

history.pushState() 创建一个新的同源url history.state 获取传达过来的对象中的状态值，即pushState中的第一个参数

语法： history.pushState(要传的对象,title,url)

title:一般不使用，可以传个空字符串

url：必须与当前url同源

该方法使用后还可以返回上一页


history.state 等价于 window.history.state

<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>

  <button class="btn">点击触发history.pushState()</button>

  <button class="newBtn">点触发window.history.pushState()</button>

</body>

<script>

  $(()=>{
    $('.btn').click(()=>{
      console.log(history.state) // 打印的是pushState中的第一个参数，假设是从newBtn操作过来的，则打印{name:'wang',age:34}
      let obj = {name:'zhang',age:12}
      history.pushState(obj,'','http://localhost/ceshi/jqueryceshi.html#zhang')

    })

    $('.newBtn').click(()=>{
      console.log(this.history.state) // 打印的是pushState中的第一个参数，假设是从btn操作过来的，则打印{name:'zhang',age:12}
      let obj = {name:'wang',age:34}
      window.history.pushState(obj,'','http://localhost/ceshi/jqueryceshi.html#wang')
    })
  })

</script>

</html>

history.replaceState() 修改当前的url，不会创建新的url，因此如果返回的话，会直接跳过当前的url，回到更早的url地址

规则：
history.replaceState(stateObj,title,url)
window.history.replaceState(stateObj,title,url)

stateObj:传递的实例，可以在修改结束后，通过history.state 或者 window.history.state获取

title：可以不进行使用

url:修改后的url

该方法使用后，是修改当前的url，而不是新创建一个url，所以纵使返回上一个网页，也是返回到再之前的网址


<!DOCTYPE html>
<html>

<head>
  <script src='./jquery-3.4.1.min.js'></script>
  <meta charset="utf-8" />
</head>

<body>

  <button class="btn">点击触发history.replaceState()</button>

  <button class="newBtn">点触发window.history.replaceState()</button>

</body>

<script>

  $(()=>{
    $('.btn').click(()=>{
      console.log(history.state)
      let obj = {name:'zhang',age:12}
      history.replaceState(obj,'','http://localhost/ceshi/jqueryceshi.html#zhang')

    })

    $('.newBtn').click(()=>{
      console.log(this.history.state)
      let obj = {name:'wang',age:34}
      window.history.replaceState(obj,'','http://localhost/ceshi/jqueryceshi.html#wang')
    })
  })

</script>

</html>

history.go() 返回到history对象中存储的url网址

history.go(number|str) 

参数可以是数字或者url地址，但是url地址必须存在，一般使用数字比较多

参数为负数：退回页面

参数为正数：前进页面

该方法返回后页面不刷新

history.back() 返回到history对象中的前一个页面中

history.back() 返回上一个页面

该方法返回后页面会刷新
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值