JavaScript-入门第一周学习笔记4

目录

一、JavaScript的组成

二、DOM树

三、查找元素

1、id查找

2、标签名查找

3、class查找

四、通过节点之间的关系进行查找

五、操作元素

1、内容 

2、属性获取

3、样式   

4、绑定元素事件

---

一、JavaScript的组成

        1、ECMAScript - 简称ES3/5/6，核心语法 - 内功心法（逻辑部分）

        2、Document Object Model - 简称DOM，文档对象模型 - 外功招式（专门用于操作网页文档HTML+CSS）

        3、Browser Object Model - 简称BOM，浏览器对象模型 - 外功招式（专门用于操作浏览器）

二、DOM树

        DOM将HTML看做了是一个倒挂的树状结构.

        树根：是一个document对象，document对象不需要我们程序员创建，它由浏览器的js解释器创建，且一个页面只有一个document，

        作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）

        DOM节点：可以是一个标签、文本、属性、元素

三、查找元素

        通过HTML的特点去查找

1、id查找

        在当前DOM树中，根据元素的id，获取具体的DOM节点。

var elem = document.getElementById("id值")

        返回结果：

                找到——返回对应的元素

                没找到——null

        特殊：

                ①如果页面上有多个重复的id，只会返回第一个

                ②此方法找到的是单个元素 - DOM节点是可直接用于做操作的

                ③此方法前端人员不能使用 - 以后留给后端工程师使用

2、标签名查找

        在当前DOM树中，根据标签名获取元素们。

var elems = document/已经找到的父元素.getElementsByTagName(" ")

        返回结果：

                找到——返回一个DOM集合

                没找到——空数组

        特殊：

                ①返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部。

                ②不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素。

3、class查找

   在当前DOM树中，根据类名获取元素们。

var elems = document/已经找到的父元素.getElementsByClassName(" ")

        返回结果：

                找到——返回一个DOM集合

                没找到——空数组（类数组-类似数组）

        特殊：

                ①返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部。

                ②不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素。

四、通过节点之间的关系进行查找

        前提：必须先要找到一个节点才能使用关系。    

elem.parentNode;    //父：单个元素
elem.children;    //子：集合
elem.firstElementChild;    //第一个儿子：单个元素
elem.lastElementChild;    //最后一个儿子：单个元素
elem.previousElementSibling;    //前一个兄弟：单个元素
elem.nextElementSibling;    //后一个兄弟：单个元素

五、操作元素

<标签名 属性名="属性值" style="样式">内容</标签名>

1、内容 

        ①innerHTML属性

                获取 或 设置 某个元素的内容，并且可以识别标签。

                获取内容：elem.innerHTML;

                设置内容：elem.innerHTML="新内容";

        ②innerText属性

                获取 或 设置 某个元素的文本，不能可以识别标签。

                获取内容：elem.innerText;

                设置内容：elem.innerText="新内容";

tip：以上两个属性都是为双标签准备的。

        ③value属性

                专门为单标签（input）操作内容准备的

                获取内容：input.value;

                设置内容：input.value="新内容";

2、属性获取

        只要是放在HTML标配上的都是一个属性。

        ①获取属性值

elem.getAttribute("属性名");

        ②设置属性值

elem.setAttribute("属性名","属性值");

tip：以上两个方法有点繁琐，但是是无敌的。

简化方式：

        获取：elem.属性名;

        设置：elem.属性名="属性值";

缺陷：

        Ⅰ 不能操作自定义属性，只能操作标准属性

        Ⅱ class在ES6升级为了一个关键字，所以想要写class换为了className

3、样式   

        ①CSS定义的方式

                Ⅰ内联样式

                Ⅱ内部样式

                Ⅲ外部样式

        ②JS操作内联样式的好处

                Ⅰ优先级最高，写的JS一定生效。

                Ⅱ一次只会操作一个元素，不会牵一发动全身。

        ③语法规则

        获取：elem.style.css属性名;
        设置：elem.style.css属性名="css属性值";

                特殊：Ⅰcss属性名，要把有横线地方，换成小驼峰命名法。

                           Ⅱ获取的时候，目前只了解获取内联样式，不能获取样式表中的样式。

4、绑定元素事件

        ①单个元素

elem.onclick=function(){
    操作;
	this->单个元素绑定事件，this->elem绑定事件的这个元素;
}

          ②多个元素

for(var i=0;i<elems.length;i++){
	elems[i].onclick=function(){
		操作;
		this->多个元素绑定事件，this->当前触发事件的元素;
    }
}

课堂总结：

        1、一切的获取都是为了判断。

        2、一切的设置都是为了修改。

        3、千万不要对着一个集合做操作，要么遍历拿到全部，要么使用下标拿一个。