DOM深入学习之一

最新推荐文章于 2024-07-23 18:15:45 发布

淡逝奈成风吟

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量119

点赞数

分类专栏： DOM 文章标签： javascript js css

本文链接：https://blog.csdn.net/YANNINGXINYI/article/details/107214780

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.DOM选择器

选择器的作用：选中Html元素，然后进行 js 的修改。
用什么存选择器选中结果？
答案是变量。

  // 通脱 html 字符串 获取html元素集合  返回 【类数组】 (Elements)
  var divs = document.getElementsByTagName('div');
  console.log(divs)
  console.log(divs[1]) 

  // 获取 class 为 'wraper' 的元素集合 返回 【类数组】
  var wrap = document.getElementsByClassName('wraper');
  wrap = wrap[0]
  console.log(wrap)  // 获取元素对象

  // 通过IDh获取 id=box 的html元素对象 返回 元素对象
  var box = document.getElementById('box');
  console.log(box)

  // 返回元素节点
  var box1 = document.querySelector('#box');
  console.log(box1)
  // querySelectorAll() 返回元素节点集合
  var wraps = document.querySelectorAll('.wraper');
  console.log(wraps)

总结：
dom 的选择器 document.xxxx() 参数为字符串, 返回值要么是元素对象要么是元素对象结合。
（注意返回集合用到结集合取值）

2.特殊的DOM对象

获取的【页面】元素对象：
就是获取页面的高度；监听行为等等。
兼容型问题： IE 9以下有问题。

     var dom = document.documentElement;
     console.log(dom)

     var body = document.body;
     console.log(body)

     // 如果 document.documentElemtn 有返回值那么赋值 为 document.documentElemnt返回值
     // 没有则赋值 documen.body
     var node = document.documentElement|| document.body; // 做了兼容性处理
     
     // 注意页面高度不是视图窗口高度
     console.dir(node.offsetHeight)

3.改变html内容

<body>
   <div class="wraper">
     <div id="" class="box">这是一个htmL</div>
     <button id="btn">点击修改</button>
   </div>
   <script>
     //   var box = document.getElementsByClassName("box")[0];
     // //   var btn = document.querySelector("#btn");

     // //   // 点击事件  事件处理函数需要用户触发行为才能执行
     //   btn.onclick = function () {
     //     // innerHTML html 中的内容
     //     box.innerHTML = "修改后的内容";
     //   };
     //   console.log(box);
     // console.dir(btn);

     var wraper = document.getElementsByClassName("wraper")[0];

     // 对象取值
     console.dir(wraper.innerHTML); // html字符串
     console.log(typeof wraper.innerHTML); //string
     // 给 innerHTML 重新赋值
       // wraper.innerHTML = 'dddd';

     // wraper.innerText = "啊啊啊啊啊";
     console.dir(wraper);
     
   </script>
 </body>

不难得出结论：
页面中所有信息都是字符串；
页面中标签可以通过dom 选择器获取dom对象。
此外：
innerHTML 与 innerText 区别？
innerHTML 赋值为模板字符 innerText 赋值为文本内容。
不论修改哪一个内容；html 中内容都会发生变化。推荐使用innerHTML。

4.DOM思维对象

元素对象原型继承的过程：document–>HTMLDoucment—>Document—>NODE----->eventTarget—>Object—>null

        console.log(window);
        console.dir(document);
        console.log(document.getElementsByClassName);

现在出现了以下问题：
目的是什么，什么意思，怎么用？
由此我们进入下一篇内容。

5.修改属性值

<body>
 <div class="wrap" style="width:100px" id="aa">
 </div>
 <script>
     var wrap = document.getElementsByClassName('wrap')[0];
     // 获取html是属性 html 具有这个属性；或者自定义属性
     console.log(wrap.style.width) // 获取属性
     // 修改 html 属性的值  
     // 通过js 设置 css 样式 设置是行内样式
     wrap.style.width = '200px';
     wrap.style.height = '100px';
     wrap.style.backgroundColor = 'red'
     console.log(wrap.style.width)
     console.log(wrap.id);
 </script>
</body>

6.设置css样式

<body>
    <div class="wrap"></div>
    <button id="btn">点击变圆</button>
    <script>
    
      var wrap = document.getElementsByClassName('wrap')[0];
      var btn  = document.getElementById('btn')
      console.log(wrap.className)
      wrap.className = 'size';

      // className 返回类名字符串  classList 返回是 类名类数组
      // // classList 添加类名 从而添加 css 样式
      // var res = [...wrap.classList];
      // res.push('radio');
      // res = res.join(' ');
      // wrap.classList = res;
      // console.dir(wrap.classList)

    //   btn.onclick = function(){
    //       var strClass = wrap.className;;
    //       wrap.className = strClass + ' ' + 'radio'
    //   }

      btn.onclick = function(){
         var names = wrap.classList;
         names = [...names];
         names.push('radio')
         console.log(names)
         names = names.join(' ')
         wrap.classList = names
      }
    </script>
  </body>

这是style样式

<style>
      .size {
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
      }
      .radio {
        border-radius: 50%;
      }
    </style>

7.获取css样式

<body>
    <div class="wrap" style="border-radius: 50%;"></div>
    <script>
        var wrap = document.getElementsByTagName('div')[0];
        // 只能获取 行内样式 
        // var res = wrap.style;

        // 可以获取所有的样式
        // getComputedStyle(元素对象,null) 获取元素样式
        // 参一:元素对象
        // 参二：是否获取为元素 null 表示不获取
        // 注意：仅支持 谷歌和获取 不支持低版本Ie 8以下 
        // var res = getComputedStyle(wrap,null)
        // console.log(res.width)
        // console.log(res.borderRadius)

        // 仅支持ie 
        // var resIe = wrap.currentStyle;
        // console.log(resIe.width)

        // 获取样式兼容型问题
        function getStyle(el){
            if(el.currentStyle){  // ie
                return el.currentStyle
            }else{ // 其他
                return getComputedStyle(el,null)
            }
        }

        console.log(getStyle(wrap).width)
        
    </script>
</body>

这是style样式

<style>
        .wrap{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

8.选择器getElement封装

js部分代码如下：

 <script>
      getELement('span')
      
      getELement('#box')
      console.log(getELement('.wrap'))
      console.log(getELement('#box'))
      console.log(getELement('div'))

      // getElement() 作用：选择器的封装
      // 参数：字符串类型

      function getELement(el){
          if(arguments.length>1){
              throw new Error('params.length cannot gt 1');
          }
          if(typeof el !== 'string'){
              throw new Error('arguemet of type can string')
          }
          if(arguments.length===0){
              return null
          }
          if(el.charAt(0)==='.'){  // class 选择器
              el = el.substr(1)
              return document.getElementsByClassName(el);
          }else if(el.charAt(0)==='#'){  // id 选择器
              el = el.substr(1)
              return document.getElementById(el);
          }else{  // 元素选择器 
              return document.getElementsByTagName(el);
          }

      }
    </script>

body中内容：

<div class="wrap"></div>
    <div id="box"></div>

9.setStyle

代码如下：

<body>
    <div class="wrap"></div>
    
    <script>
      var styleObj = {
        width: "100px",
        height: "100px",
        backgroundColor: "red",
      };
      var wrap = document.getElementsByTagName("div")[0];
      // wrap.style.width = styleObj['width']
      // wrap.style.height = styleObj['height']
      // wrap.style.backgroundColor = styleObj['backgroundColor']

      // for(var x in styleObj){
      //     wrap.style[x] = styleObj[x]
      // }

      setStyle(wrap, styleObj);
      //  作用：给某一个元素设置样式
      function setStyle(el, styleObj) {
        for (var x in styleObj) {
          el.style[x] = styleObj[x];
        }
        return
      }

    </script>
  </body>

总结如下

选择器

选中html元素

document.getElmentsByClassNmae();
…

操作属性

元素对象.属性

修改中内容

元素对象.innerHTML = ‘新内容’

设置css样式

行内样式
元素对象.style.css属性 = ‘值’
添加class 类名
元素对象.className = ‘class类名重新赋值’

获取html元素样式兼容性

      // 获取样式兼容型问题
        function getStyle(el){
          // el 元素对象
            if(el.currentStyle){  // ie
                return el.currentStyle
            }else{ // 其他
                return getComputedStyle(el,null)
            }
        }

淡逝奈成风吟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM深入学习之一

1.DOM选择器选择器的作用：选中Html元素，然后进行 js 的修改。用什么存选择器选中结果？答案是变量。 // 通脱 html 字符串获取html元素集合返回【类数组】 (Elements) var divs = document.getElementsByTagName('div'); console.log(divs) console.log(divs[1]) // 获取 class 为 'wraper' 的元素集合返回【类数组】 var wrap =
复制链接

扫一扫

专栏目录