第一周第五天笔记

绝世大美女
119 阅读4分钟

一、**************DOM：

    Document Object Model：文档对象模型：专门用于操作HTML文档的，提供了一些方法给你。

二、DOM树概念：

    DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象
    
    document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根
    作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
    DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象

三、查找元素：两大方面：

1、直接通过HTML的特点去查找元素

    1、通过 ID 查找元素：
            var elem=document.getElementById("id值");
            特殊：
                1、返回值，找到了返回当前找到DOM元素，没找到返回的一个null
                2、如果出现多个相同id，只会找到第一个
                3、记住控制台输出的样子，这个样子才叫做一个DOM元素/节点/对象，才可以下午去做操作
                4、忘记此方法，不允许使用，id不好用，一次只能找一个元素。id留给后端用
                5、其实根本不用查找，id直接可用

    2、*通过 标签名 查找元素：
            var elems=document/已经找到的父元素.getElementsByTagName("标签名");
            特殊：
                1、返回值，找到了返回一个类数组DOM集合，没找到得到空集合
                2、js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
                3、不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素

    3、*通过 class 查找元素：
            var elems=document/已经找到的父元素.getElementsByClassName("class名");
            特殊：
                1、返回值，找到了返回一个类数组DOM集合，没找到得到空集合
                2、js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
                3、不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素

2、*通过关系去获取元素：

    前提条件：必须先找到一个元素才可以使用关系
	父元素：elem.parentNode; - 单个元素
	子元素：elem.children; - 集合
	第一个子元素：elem.firstElementChild; - 单个元素
	最后一个子元素：elem.lastElementChild; - 单个元素 
	前一个兄弟：elem.previousElementSibling; - 单个元素 
	后一个兄弟：elem.nextElementSibling; - 单个元素

	为什么要通过关系去找元素呢？不希望影响到别人，只希望影响到自己的关系网

四、操作元素

    前提：先找到元素，才能操作元素，3方面
    1、内容：
        1、*elem.innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签的
                获取：elem.innerHTML;
                设置：elem.innerHTML="新内容";

        2、elem.innerText - 获取和设置开始标签到结束标签之间的纯文本，不识别标签的
                获取：elem.innerText;
                设置：elem.innerText="新内容";

        以上两个属性都是专门为双标签准备，而有一个单标签也是可以写内容，叫做<input />，我们如何获取？
        3、input.value - 专门获取/设置input里的内容
                获取：input.value;
                设置：input.value="新内容";

    2、属性：
        获取属性值：elem.getAttribute("属性名");
        设置属性值：elem.setAttribute("属性名","属性值");

        简化版：
                获取属性值：elem.属性名;
                设置属性值：elem.属性名="属性值";
                简化版的缺点：
                        1、class必须写为className - ES6(2015年)class变成了一个关键字
                        2、不能操作自定义属性

    3、样式：
        使用样式的方式：3种
                1、*内联样式
                2、内部样式表
                3、外部样式表 - 一阶段做开发用的都是外部样式表

        二阶段我们就要用js来操作【内联样式】
                1、不会牵一发动全身
                2、优先级最高

        获取样式：elem.style.css属性名;
        设置样式：elem.style.css属性名="css属性值";
        特殊点：
                1、css属性名，有横线的地方，去掉横线，变为小驼峰命名法
                        border-radius     -----  borderRadius
                2、小缺陷：获取时，我们只能获取到内联样式，因为我们目前学的就是内联样式的操作

    4、绑定事件：
        elem.on事件名=function(){
                操作;
                *****关键字this - 这个
                        如果单个元素绑定事件，this->这个元素
                        如果多个元素绑定事件，this->当前触发事件元素
        }

    一切的获取，往往都是为了判断
    一切的设置，可以说是添加也可以说是修改
avatar
文章
阅读
粉丝