发布于 

DOM模型

DOM模型

JavaScript由以下三部分构成

1.ECMAScript 2.Bom(浏览器对象) 3.Dom(文档对象)

1
注:<script>放在body的最后面
术语

1.文档(document)

1
注:1.语法 2.注意大小写3.样式不加-4.多加或少加单引号''

2.节点(了解)

1
2
3
构成网页的所有组成部分,在js中都被成为节点。
节点类型:①标签节点②属性节点③文本节点
节点属性:①nodeType节点类型②nodeName节点类型③nodeValue节点值

注:节点本身就是对象。

元素节 == 标签名 属性节 == 属性名 文本节 == #text value == null(空)

3.元素

1
就是html中的标签,在js中称为元素或对象,是节点的一种,也称为元素节点
Dom编程的基本理解
1
在js代码中获取到网页中的有关标签(元素),并对其进行某种操作。

DOM模型

如何获取元素
1
2
3
4
5
6
7
8
9
10
根据ID名获取元素 ------document.getElementByid('id名')【结果是该id所对应的元素(对象/节点)】

根据标签获取元素 ------document.getElementsByTagName('标签名')【结果是一个'集合'(伪数组)】
|注意:标签获取即使只获取一个元素,也是一个伪数组,也是集合,也要用下标去获取|

根据类名获取元素 ------document.getElementsByClassName('类名')【结果是一个'集合'(伪数组)】

------document.querySelector('选择器')【结果是该选择器所对应的第一个元素(对象/节点)】
根据选择器获取元素
------document.querySelectorAll('选择器')【结果是一个'集合'(伪数组)】
元素(节点)关系获取元素
1
2
3
4
5
6
xx元素.parentNode--------【获取到某元素的父元素】
xx元素.children---------【获取到某元素的所有子元素,是一个集合】
xx元素.firstElementChild--------【获取到某个元素的第一个子元素】
xx元素.lastElementChild--------【获取到某个元素的最后一个子元素】
xx元素.nextElementSibing-------【获取到某个元素的后一个兄弟元素】
xx元素.previousElementSibing------【获取到某个元素的前一个兄弟元素】
添加元素
1
2
3
4
5
6
7
8
9
10
创建元素-----var 变量 = document.createElement('标签名'
|注:创建的元素以内存变量的形式,未放入页面中|

克隆元素-----var 变量 = xx元素.cloneNode(true/false)【true表示同时克隆该元素的所有内部内容。false表示不克隆该元素的内部内容】

添加元素到父元素中的最后位置------xx父元素.appendChild(xx要添加的元素)【结果该新添加的元素成为了父元素的最后一个子元素】

添加元素到父元素中的某个元素之前-----xx父元素.insertBefore(xx要添加的元素,xx现有的元素)【结果该新添加的元素成为了父元素的一个子元素,并在指定的子元素前】

替换某个现有元素------xx父元素.replaceChild(xx新,xx旧)【结果就是新的元素替换了所给定的现有子元素】
删除元素
1
父元素.removeChild(子元素)

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.