JavaScript的组成及 DOM

须臾不敢忘

已于 2022-10-28 21:29:48 修改

阅读量663

点赞数 3

文章标签： css css3 前端

于 2022-10-28 21:20:30 首次发布

本文链接：https://blog.csdn.net/m0_74331160/article/details/127578875

版权

一、JavaScript的组成

1、ECMAScript：JavaScript的语法标准 —— ECMAScript5.0、ECMAScript2015（ES6）、ECMAScript2017

2、BOM：浏览器对象模型

3、DOM：文档对象模型

二、DOM：

 1、什么是DOM?

Document Object Model：文档对象模型

 2、DOM的核心：document对象

 3、DOM的作用：可以访问和操作XML和HTML文档中标签、标签的属性、节点的属性和方法

 4、在DOM中将整个html文档看做是一个倒立的树（树装结构）：一个html页面就是一个DOM对象，是一棵DOM HTML树

（1）DOM HTML树的根节点：html

（2）元素(Element)：html文档中的标签

（3）节点(Node)：html文档中的内容

 5、DOM树中节点的分类：

（1）标签节点：所有的标签

（2）属性节点：标签的属性 —- 内置属性、自定义属性

（3）文本节点：标签中的文本、换行、空格等

（4）注释节点：

 6、基本概念

（1）根节点：根节点是html，有且只能有一个

（2）子节点：某个节点的下一级节点

（3）父节点：某个节点的上一级节点

（4）兄弟节点：拥有相同父节点的节点

        let myId = document.querySelector('.id')
        console.log(myId)
        //__proto__表示元素的原型
        console.log(myId.__proto__)

三、通过document对象来操作html页面中的元素

1、getElementById(“id属性值”)：通过标签的id属性获取标签

2、getElementsByName(“name属性值”)：通过标签的name属性获取标签，返回值的类型是NodeList

3、getElementsByTagName(“标签名”)：通过标签名获取标签，返回值的类型是HTMLCollection

4、getElementsByClassName(“class属性值”)：通过标签的class属性获取标签，返回值的类型是HTMLCollection

5、querySelector(‘#id属性值’)：返回一个指定id属性值的标签

querySelector(‘.class属性值’)：返回第一个指定class属性值的标签

querySelector(‘标签名’)：返回第一个指定标签名的标签

6、querySelectorAll(‘.class属性值’)：返回所有指定class属性值的标签。返回值的类型是NodeList

querySelectorAll(‘标签名’)：返回所有指定标签名的标签。返回值的类型是NodeList

四、document对象的属性

1、document.body：返回文档的body元素

2、document.documentElement：返回文档的html元素

3、document.forms：返回文档的form(表单)对象

五、Element对象的属性和方法：在JavaScript代码中使用html的标签（Element）属性和方法

1、children属性：用来获取某个元素的子元素

强调：HTMLCollection和NodeList的区别

 （1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

 （2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

 （3）HTMLCollection对象用于元素操作

 （4）NodeList对象用于节点操作

六、元素的属性和方法

 1、属性：

（1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

（2）innerText：设置或返回元素中去除所有标签的内容（不能解析标签—-不识别标签）

（3）textContent：设置或者返回指定节点的文本内容（不识别换行）

 2、方法：

（1）document.write(“html内容”)：在文档中写入指定的内容

（2）document.writeln(“html内容”)：向文档写入指定的内容后并换行（根据浏览器决定，有些浏览器是空格）

七、标签的属性

1、attributes：返回标签的所有属性集合

2、setAttribute(name, value)：设置标签的属性值。参数name表示属性名，参数value表示属性值

3、getAttribute(name)：获取标签的某个属性值。参数name代表属性名

4、removeAttribute(name)：删除标签的某个属性。参数name代表属性名

八、元素的样式

 1、用法：

元素名.style.样式属性名

注意：“样式属性名”在使用时需要将单词之间的’-‘删除，将第二个单词的首字母大写

大家踊跃发言，有什么问题尽管提出来，如果没有，看都看到这了，动动小手点个赞