Dom对象的应用

Zhujjyy

已于 2024-09-24 19:28:18 修改

阅读量404

点赞数 3

文章标签： javascript 前端开发语言

于 2024-09-24 08:43:36 首次发布

本文链接：https://blog.csdn.net/Zhujjyy/article/details/142478160

版权

Dom对象的应用

输入框 prompt

警告框 alert

确认框 confirm

关闭页面 clos

  function a() {

   *// 关闭页面*

   close()

  }

  document.querySelector('#bt1').onclick = a

打开新页面

  function b() {

   open('a.html','新的页面','height=200px,left:300px,top=300px')

  }

获取元素

  <script>
    // 通过id获取元素,获取的是单个元素
    document.getElementById('aaa').style.backgroundColor = 'blue'
    // 通过获取class获取元素,获取到一个伪数组
    document.getElementsByClassName('bbb')[0].style.color = 'red'
    document.getElementsByClassName('bbb')[1].style.color = 'red'
    // 通过标签名获取元素,获取到一个伪数组

    let lis = document.getElementsByTagName('li')
    for (let i = 0; i < lis.length; i++) {
      document.getElementsByTagName('li')[i].style.color = 'green'
    }

    // 根据选择器进行获取,只获取低第一个
    document.querySelector('li').style.backgroundColor = 'yellow'
    // all获取到所有.也是一个伪数组
   let li2=  document.querySelectorAll('li')
   for (let i = 0; i < li2.length; i++) {
      document.querySelectorAll('li')[i].style.fontSize='30px'
   }

  //  写入文本
  document.write('<h2>Hello word!</h2>')
  </script>

页面前进

   function a() {
      //前进 
      history.forward()
      // history.go(1)
    }

页面后退

    function b() {
      // 后退
      history.back()
      // history.go(-1)
    }

 document.write('端口号:' + location.host + '<br>')
    document.write('主机号:' + location.hostname + '<br>')
    document.write('url:' + location.href + '<br>')

刷新页面

 function a(){

   location.reload()*//相当于刷新页面*

  }

替换页面

  function b(){
      location.replace('2.html')//相当于替换页面
    }

练习制作简易的当当购物车页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作简易的当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="clo()">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li >移入收藏</li>
            <li onclick="del()">删除</li>
            <li >移入收藏</li>
            <li onclick="del()">删除</li>
            <li><span onclick="js()">结 算</span></li>
        </ul>
    </div>
</div>
<script src="js/shop.js"></script>
<!-- <script>
    function a(){
        close()
    }
    function b(){
        let flag = confirm('是否删除')
        alert(flag)
    }
    function c(){
        let a = confirm('是否收藏')
        alert(a)
    }
    function d(){
        open('a.html','新页面','height=200px')
        alert('白岩松:白说')
    } -->
</script>
</body>
</html>

js内容

// 关闭
function clo() {
  close()
}
// 删除
function del() {
  let flag = confirm('是否删除?')
  if (flag) {
    alert('删除成功')
  }
}
// 收藏

// 结算
function js(){
  alert('结算成功')
}

node节点

<body>
  <ul>
    <li id="li1">1</li>
    <li>2</li>
    <li id="li3">3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    let li1 = document.getElementById('li1')
    // 返回节点的父节点
    let par = li1.parentNode
    par.style.border = '1px solid red'
    // 获取所有子节点的集合
    let nodes = par.childNodes
    // nodes[i].style.color='red'

    // 第一个子节点
    let first = par.firstChild
    // alert(first.nodeName)
    // 最后一个
    let last = par.lastChild

    let li3 = document.getElementById('li3')
    // 上一个节点
    // alert(li3.previousSibling.nodeValue)
    // 下一个
    alert(li3.nextSibling.nodeValue)
    // 获取父节点
    let p = document.getElementsByTagName('ul')[0]
    // 第一个节点
    p.firstElementChild.style.border = '1px solid pink'
    // 最后一个节点
    p.lastElementChild.style.border = '1px solid pink'
  </script>
</body>

setAttribute 把指定属性设置或更改为指定值。

<body>
  <input type="radio" name="book" value="图书1">图书1
  <input type="radio" name="book" value="图书2">图书2
  <br>
  <img src="" alt="" height="300px" width="300px">
  <p></p>
  <script>
    let img=document.querySelector('img')
    let p =document.querySelector('p')
    document.getElementsByName('book')[0].onchange=function(){
      img.setAttribute('src','img/1.jpg')
      let val=document.getElementsByName('book')[0].value
      p.innerHTML=val
    }
    document.getElementsByName('book')[1].onchange=function(){
      img.setAttribute('src','img/2.jpg')
      let val=document.getElementsByName('book')[1].value
      p.innerHTML=val
    }
  </script>
</body>

创建一个node

<body>
  <input type="radio" name="book" value="图书1">图书1
  <input type="radio" name="book" value="图书2">图书2
  <br>
  <!-- <img src="" alt="" height="300px" width="300px"> -->
  <p></p>
  <script>
    let p =document.querySelector('p')
    document.getElementsByName('book')[0].onchange=function(){
    //  创建一个node
    let img=document.createElement('img')
    img.setAttribute('src','img/1.jpg')
    // 追加元素  
    p.appendChild(img)

   
    }
    document.getElementsByName('book')[1].onchange=function(){
      let img=document.createElement('img')
    img.setAttribute('src','img/2.jpg')
    // 追加元素  
    p.appendChild(img)
    }
  </script>
</body>

删除子节点

<body>
  <img src="img/1.jpg" alt="">
  <script>
    document.querySelector('img').onclick=function(){
      let img=document.querySelector('img')
      // 需要通过父元素才能删除
     img.parentNode.removeChild(img)
    }
  </script>
</body>