JS-DOM查找节点

DOM

全称:文档对象模型 / Document Object Model

作用: 定义一系列标准对象，通过对象给我们提供的方法来访问节点、操作(增删改查)节点(HTML元素)，Dom中一切都是对象，包含方法以及属性。所有的操作都是从对象开始。

在Dom中所有的内容都会被解析为一个节点(对象 )，会形成一个倒挂的树状图，这是其在内存中的存储方式。

节点:

节点分类

节点类型共有12种,

1. 元素节点 、 HTML标签

2. 属性节点 、 HTML标签中的属性

3. 文本节点 、 页面中可以看到的内容

4. 注释节点 、 HTML中的注释

   (123常用)

节点关系

1. 父节点/parentNode

2. 子节点/chlidNode

   第一个子节点/fristChild

   最后一个子节点/lastChild

3. 兄弟节点

   下一个兄弟/nextSibiling

   上一个兄弟/previousSibiling

查找节点方法:

//1.根据id
    let idHtml = document.getElementById("Id值");
    //发方法返回一个对象，id值唯一


    idHtml.innerHTML
    idHtml.innerText
    //获取标签中的内容

    idHtml.innerHTML = "内容";
    //修改HTML标签种的内容，识别标签
    //idHtml.innerHTML = “<p>这是一个标签</p>”

    idHtml.innerText = "内容";
    //修改HTML标签种的内容，不识别标签-会把标签都当做文本

//2.根据元素标签
    let tagList = document.getElementsByTagName("标签名称");
    //返回节点集合对象 nodeList 可以作为只读数组处理-(可以用数组的方式，获得某个节点)
    //tagList.length 获得该集合该元素的个数
    //存放顺序为原文档中的书写循序


    let tagOne = tagList[0];
    //获取当前标签的第一个元素节点

    let tagOne = document.getElementsByTagName("标签名称")[0];
    //上述的简写

    let tagOne = document.getElementsByTagName("标签名称1")[0]
                            .getElementsByTagName("标签名称2")[0];
    //找到标签1下边的标签2元素
    //操作标签中内容同id查找

//3.根据name属性的值
    let nameList = document.getElementsByName("name属性的值");
    //根据元素name属性的值来获取元素对象的集合
    //用法类似 根据元素标签(2)寻找元素
    //注意!!!!该方法主要针对表单元素来使用
    //对于表单元素 name是自身属性 对于非表单元素来说 name是自定义属性
    //对于IE浏览器有区别，Google、火狐没区别

//4.根据Class属性的值--推荐使用，但它具有兼容性(IE不支持)
    let classList = document.getElementsByClassName("name属性的值");
    //根据元素Class属性的值来获取元素对象的集合
    //用法类似 根据元素标签(2)寻找元素

//兼容函数-以根据Class属性查询为例
    function MyGetElementsByClassName(clazzName){
        var classList = [];
        //document.all IE支持该属性
        //是IE则有值为true，不是IE则无值为false
        if(document.all){
            var objList = document.getElementsByTagName("*");
            for(var obj of objList){
                if(obj.className == clazzName)
                    classList.push(obj);
            }
        }else{
            classList = document.getElementsByClassName(clazzName);
        }
        return classList;
    }

ES6中提供了两个新的API

//1.查询选择器
    (document||Element).querySelector("css选择器");
    //接收css的选择器，只返回与该模式匹配的第一个匹配的元素
    //如果没有找到返回null 如果是不支持的选择器或格式不正确会报错
    //通过document类型的调用方法，则在文档范围类查找配的元素
    //通过Element类型的调用方法，则在该元素的后代范围类查找配的元素

    (document||Element).querySelectorAll("css选择器");
    //接收css的选择器，只返回与该模式匹配的所有匹配的元素，返回一个类数组
    //使用方法与querySelector("css选择器")一样