JS DOM获取

标签：DOM 元素 JS 获取 var document 节点

一、DOM初相识

DOM简介

文档对象模型（Document Object Model ，简称DOM），它就是一些系列编程接口，有了这些接口，就可以改变页面内容，结构和样式

DOM树：

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

事件前言

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口.....

事件非常多，为了方便演示，先学简单的事件，后面再详细学习

方式一、

标签中对应的属性(事件属性)中设置一些js代码，这样当事件被触发时，这些代码将会被执行

这种方式：结构与行为耦合，不方便维护，不推荐使用

<button id="btn"  onclick="alert('哈喽');">我是一个按钮</button> //onclick点击事件，点击的时候触发

方式二、

可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用

<body>
    <button id="btn">我是一个按钮</button>
    <script>
      //第一步：获取按钮对象
      var btn=document.getElementById("btn");
      //第二步：绑定一个单击事件
      //像这种为单击事件绑定的函数，我们称为单击响应函数
      btn.onclick=function(){
          alert("你好")
      }
    </script>    
</body>

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。

第一种加载情况：

将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码

<button id="btn">点我一下</button>
  <script type="text/javascript">
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function () {
      alert("hello");
    };
  </script>

第二种加载写法：

onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

window.onload = function () {
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function () {
      alert("hello");
    };
  };

二、DOM获取

DOM在我们实际开发中主要用来操作元素。一般有以下方法获取DOM

getElementById()

通过id属性获取一个元素节点对象，参数：id是大小写敏感的字符串，返回的是一个元素对象

补充1：innerHTML 可读写，一方面可获取到元素内部的html代码，另一方面可以操作更改元素内容，包括标签，保留空格和换行，比较常用

补充2：innerText 可读写，它和innerHTMl类似，不同的是更改元素内容的时候，它会自动将html标签，空格和换行去除

补充3：console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法

var btn01 = document.getElementById("btn01");   //查找#btn01节点
  btn01.onclick = function () {
    var bj = document.getElementById("bj") //查找#bj节点
    alert(bj.innerHTML);
    //console.dir(bj, "bj");
  };

getElementsByTagName()

3.2.2.1、根据标签名来获取一组元素节点对象

返回一个类数组(伪数组)对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到伪数组中返回;如果页面中没有这个元素，则会返回一个空的伪数组；

var btn02 = document.getElementById("btn02");
    btn02.onclick = function () {
      var lis = document.getElementsByTagName("li");
      //打印lis
      //alert(lis.length);
      //遍历lis
      for (var i = 0; i < lis.length; i++) {
        console.log(lis[i].innerHTML);
      }
    };

获取某个元素（父元素）内部所有指定标签名的元素

element.getElementsByTagName('标签名')

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

//获取id为city的元素
var city = document.getElementById("city");
/*  1:city.getElementsByTagName(); 获取元素下的一组节点  */
var lis = city.getElementsByTagName("li");

getElementsByName()

通过name属性获取一组元素节点对象

补充2： innerHTML用于获取元素内部的HTML内容的，对于自结束标签，这个属性没有意义

补充3：如果需要读取元素节点属性，语法： 元素.属性名，

例如：元素.id ；元素.name ；元素.src ;元素.href等

表单属性：type、value、checked、selected、disabled等

注意：class属性不能采用这种方式，读取class属性时需要使用元素.className

value值：就是输入文本框中的内容，要修改value值 element.value = "～～";

var btn03 = document.getElementById("btn03");
  btn03.onclick = function () {
    var inputs = document.getElementsByName("gender");
    //alert(inputs.length);
    for (var i = 0; i < inputs.length; i++) {
       //alert(inputs[i].innerHTML);
      // alert(inputs[i].value);
      alert(inputs[i].className);
    }
  };

getElementsByClassName()

通过class属性获取一组元素节点对象（不支持IE8及以下浏览器）

var btn04 = document.getElementById("btn04");
  btn04.onclick = function () {
    var classs = document.getElementsByClassName("inner");
    for (var i = 0; i < classs.length; i++) {
      alert(classs[i].className);
    }
  };

childNodes、children

返回父元素下的所有子节点

（1）、childNodes属性会获取包括文本节点在内的所有节点，DOM标准，标签间的空白也会被当成文本节点

（2）、children属性可以获取当前元素的所有子元素，不包括空白文档了

firstChild、firstElementChild

返回父元素下的第一个子节点

（1）、firstChild 第一个子节点(包括空白的文本节点)

（2）、firstElementChild 获取当前元素的第一个子元素

返回某元素的父节点

语法：某元素.parentNode

返回某元素的前/后一个兄弟节点

（1）、 previousSibling [ˈpriːviəs] ['sibliŋ] 返回前一个兄弟节点也有可能获取到空白的文本

（2）、 previousElementSibling 返回前一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

（3）、 nextSibling返回下一个兄弟节点也有可能获取到空白的文本

（4）、 nextElementSibling 返回下一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

var div = document.querySelector(".box1 div")
var div = document.querySelector(".box1")
var div=document.querySelectorAll(".box1")

获取body标签

//方法一
var body=document.getElementsByTagName("body")[0];
//方法二
var body = document.body

获取html根标签

var html = document.documentElement;

获取页面中所有的元素

 //第一种方式
var all=document.all;
//第二种方式
var all = document.getElementsByTagName("*")

document.querySelector()

-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象

-该方法总会返回唯一的元素，如果满足条件的元素是多个，那么它只会返回第一个

-IE8以上的都适用

document.querySelectorAll()

-该方法和qureySelector()用法类似，不同的是它将会将符合条件的所有元素封装到一个伪数组中返回

-即使符合条件的元素只有一个，它也会返回数组

标签：DOM,元素,JS,获取,var,document,节点
From： https://blog.csdn.net/qq_60060362/article/details/143632321