获取元素、获取节点-DOM技术

最新推荐文章于 2025-09-16 22:08:17 发布

原创最新推荐文章于 2025-09-16 22:08:17 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

DOM

本文详细介绍了DOM的基本概念，包括文档、元素和节点的定义，并展示了如何通过DOM方法获取和操作元素，如获取父元素、子元素、兄弟元素等。此外，还讲解了如何改变元素内容、属性和样式，以及使用事件处理程序。最后，提到了排他思想在编程中的应用，特别是在元素样式的切换中。

1、DOM介绍

DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口
在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用doucument来表示
元素：页面中的所有标签都是元素，DOM中使用 element 表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

把文档中的代码翻译成一个对象模型
在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象
这些对象之间在文档模型数据结构中存在某种关系: 根节点父子节点同胞节点等等
1.只有一个根节点document
2.除了根节点外所有节点都有唯一的一个父节点
3.document是window对象的属性
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象
BOM操作会在接下来的知识点讲到它不属于标准的接口但是浏览器厂商都提供了几乎一样的功能
5.元素的属性也是独立节点叫属性节点但是不是元素节点的子节点

2、如何获取元素、节点

2.1、获取元素方法

//旧方法
document.getElementById//查找速度最快 -ID
document.getElementsByClassName -class名
document.getElementsByName -元素name属性名
document.getElementsByTagName -标签名
//H5出的新方法
document.querySelector -选择器名 符合条件的第一个元素
document.querySelectorAll -符合条件的全部元素
//不建议使用
直接使用标签的id作为节点对象引用  查找速度最快

系统提供的直接获取方式：
document.body  //body标签
document.forms  //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址

2.2、通过关系获取元素、节点

2.2.1、获取父元素、父节点

var box5 = document.querySelector("#box5")
console.log(box5.parentElement)
//获取元素的父元素
console.log(box5.parentNode)
//获取节点的父节点

2.2.2、获取子元素、子节点

     var box4 = document.querySelector("#box1");
      var arr = box4.children; //子元素们
      var arr2 = box4.childNodes; //子节点们

2.2.3、获取弟弟元素、弟弟节点

     var box = document.querySelector("#box4")
      console.log(box.nextElementSibling) //弟弟元素
      console.log(box.nextSibling) //弟弟节点

2.2.4、获取哥哥元素、哥哥节点

     var box6 = document.querySelector("#box6")
      console.log(box6.previousElementSibling) //哥哥元素
      console.log(box6.previousSibling) //哥哥节点

2.2.5、获取第一个子元素

      var box = document.querySelector("#box4")
      console.log(box.firstElementChild)//第1个子元素
      console.log(box.firstChild)//第1个子节点

2.2.6、获取最后一个子元素

     var box = document.querySelector("#box4");
      box.children[box.children.length - 1];
      box.childNodes[box.childNodes.length - 1];
      console.log(box.lastElementChild)//最后一个子元素
      console.log(box.lastChild)//最后一个子节点

2.2.7、获取父元素中的第几个子元素/节点

var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点

2.2.8、获取这个元素是同胞中的第几个

   Object.prototype.indexof1 = function () {
        var arr = this.parentElement.children;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] === this) {
            return i;
          }
        }
      };
      var box = document.querySelector("#box6");
      console.log(box.indexof1());

3、操作元素

3.1、改变元素内容-innerText、innerHTML

element.innerText
从起始位置到终止位置的内容，但它不包括HTML标签，同时空格和换行也会去掉。

element.innerHTML
起始位置到终止位置的全部内容，包括HTML标签，同时空格和换行也会去掉。

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：        </strong> 2019';
        // 2. innerHTML 识别html标签 保留空格和换行的
        div.innerHTML = '<strong>今天是：        </strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

结果：
在这里插入图片描述

3.2、改变元素属性

// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

3.3、改变样式属性

行内样式操作

// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';

类名样式操作

// element.className

Ps：

JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class 因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名

3.4、案例

   <div class="first">文本</div>
    <script>
      // 1. 使用 element.style 获得修改元素样式 如果样式比较少或者功能
      //简单的情况下使用
      var test = document.querySelector("div");

      test.style.backgroundColor = "purple";
      test.style.color = "#fff";
      test.style.fontSize = "100px";
      test.style.marginTop = "100px";
      // 让我们当前元素的类名改为了 change

      // 2. 我们可以通过 修改元素的className更改元素的样式 
      //适合于样式较多或者功能复杂的情况
      // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
      // test.className = 'change';
      // test.className = "first change";
    </script>

4、事件

4.1、事件三要素

事件源(谁)
事件类型(什么事件)
事件处理程序(做啥)

<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
//(1) 事件源 事件被触发的对象   谁  按钮
    var btn = document.getElementById('btn');
//(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序  通过一个函数赋值的方式 完成
    btn.onclick = function() {
        alert('点秋香');
    }
</script>

5、排他思想

5.1、排他思想定义

如果有同一组元素，我们相要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

5.2、案例

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'red';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>