2021-06-22

最新推荐文章于 2021-11-09 20:10:55 发布

buty_nice

最新推荐文章于 2021-11-09 20:10:55 发布

阅读量82

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118113175

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

DOM对象

DOM(Document Object Model) 文档对象模型
dom对象的方法：
① document.write( )

②document.getElementById(“id值”)
通过id值获取元素对象

③document.getElementsByClassName(“类名”)
通过类名来获取元素对象

④document.getElementsByTagName(“标签名”)
通过标签名来获取元素对象
`

列表1
列表2
列表3
列表4
列表5

有序列表
有序列表
有序列表

var lis = document.getElementsByTagName("li");//通过标签名获取dom对象
var _ul = document.getElementById("box");
var lis = _ul.getElementsByTagName("li");//通过标签名获取dom对象
var _ol = socument.getElementsByClassName("ol")//通过属性名获取dom对象

Exp2:

<style>
    .box{
      width: 100px;
      height: 200px;
      background-color: #ccc;
    }
  </style>

<body>
  <div id="btn">
    <button>点击改变大小</button>
    <button>点击改变背景颜色</button>
    <button>点击改变字体大小</button>
    <button>点击改变边框</button>
    <button>点击改变位置</button>
    <button>点击改变位置（自动）</button>
  </div>
  <div class="box">hello，我将发生变换</div>
</body>
<script>
  // tagName 标签名
  var btns = document.getElementById("btn").getElementsByTagName("button");
  var divs = document.getElementsByClassName("box");
  btns[0].onclick = function(){
    divs[0].style.width = "400px";
    divs[0].style.height = "400px";
  }

  btns[1].onclick = function(){
    divs[0].style.backgroundColor = "pink";
  }
  btns[btns.length-1].onclick = function(){
    var i = 0,timer = null;
    timer = setInterval(function(){
      i += 10;
      divs[0].style.marginLeft = i + "px";
      if(i >= 1000){
        clearInterval(timer);
      }
    },100);
  }
</script>

⑤document.getElementsByName(“name值”)
通过name值来获取dom对象（元素对象集合）

⑥document.querySelector(“选择器”)
返回满足选择器的第一个元素对象

⑦document.querySelectorAll(“选择器”)
返回满足选择器的所有元素对象（元素的集合）

<body>
  <ul class="box">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
  </ul>
  <div class="box">hhlhdjfh</div>
</body>
<script>
  // var _ul = document.querySelector(".box");//获取dom元素里第一元素对象  单个
  // console.log(_ul)

  var _el = document.querySelectorAll(".box");//返回所有满足条件的dom元素对象  nodeList
  console.log(_el[0]);
</script>

事件

onmouseover 鼠标移入事件
onmouseout 鼠标移出事件

//二级菜单练习
 <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    .clearfix::after{
      display: block;
      content: '';
      clear: both;
    }
    .box{
      width: 1000px;
      margin: 0 auto;
    }
    .box .nav>li{
      float: left;
    }
    .box .nav li{
      position: relative;
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #ccc;
    }
    .box li a{
      color: #fff;
      font-size: 14px;
    }
    .box li:hover{
      background-color: #999;
    }
    .box .nav .subnav{
      display: none;
      position: absolute;
      top: 40px;
      left: 0;
      background-color: #ccc;
    }
    /* .box .nav li:hover .subnav{
      display: block;
    } */
  </style>
</head>
<body>
  <div class="box">
    <ul class="nav clearfix">
      <li onmouseover="fun1(this)" onmouseout="fun2(this)"><a href="#">首页</a></li>
      <li onmouseover="fun1(this)" onmouseout="fun2(this)">
        <a href="#">咨讯</a>
        <ul class="subnav">
          <li><a href="#">淘宝新规则</a></li>
          <li><a href="#">马云将辞去阿里职务</a></li>
          <li><a href="#">双十一淘规则</a></li>
        </ul>
      </li>
      <li onmouseover="fun1(this)" onmouseout="fun2(this)">
        <a href="#">帮助</a>
        <ul class="subnav">
          <li><a href="#">帮助1</a></li>
          <li><a href="#">帮助1</a></li>
          <li><a href="#">帮助1</a></li>
        </ul>
      </li>
      <li onmouseover="fun1(this)" onmouseout="fun2(this)"><a href="#">招聘</a></li>
    </ul>
  </div>
</body>
<script>
  function fun1(obj){
    // obj-->li 
    // var list = document.getElementById("list");
    // console.log(list === obj)
    var _ul = obj.getElementsByTagName("ul");
    // console.log(_ul[0]);
    if(_ul[0] != undefined){
      _ul[0].style.display = "block";
    }
  }
  function fun2(obj){
    var _ul = obj.getElementsByTagName("ul");
    if(_ul[0] != undefined){
      _ul[0].style.display = "none";
    }
  }
</script>
</html>

DOM属性操作

设置属性：

dom对象.setAttribute(参数1，参数2)
参数1：属性名字符串
参数2：属性值

<style>
        img {
            width: 200px;
        }
    </style>
    <body>
    <img src="./images/five.jpg" alt="dddd" class="pic" a="10" title=""><br>
    <button id="btn">点击我，美女变帅哥</button>
</body>
<script>
    var _btn = document.getElementById("btn");
    var _pic = document.querySelector(".pic");
    _btn.onclick = function() {
        _pic.setAttribute("title", "这是一个美女");
    }
</script>

获取属性值：

dom对象.getAttribute(参数)
参数：属性名字符串

<body>
    <img src="./images/five.jpg" alt="dddd" class="pic" a="10" title=""><br>
    <button id="btn">点击我，美女变帅哥</button>
</body>
<script>
    var _btn = document.getElementById("btn");
    var _pic = document.querySelector(".pic");
    _btn.onclick = function() {
        console.log(_pic.getAttribute("src"));    }
</script>

删除属性：

dom对象.removeAttribute(参数)
参数：属性名字符串

   <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <img src="./images/five.jpg" alt="dddd" class="pic" a="10" title=""><br>
    <button id="btn">点击我，美女变帅哥</button>
</body>
<script>
    var _btn = document.getElementById("btn");
    var _pic = document.querySelector(".pic");
    _btn.onclick = function() {
        _pic.removeAttribute("alt");
        _pic.src = "./images/one.jpg";
        // console.log(_pic.src)
    }
</script>