DOM学习总结

最新推荐文章于 2024-02-01 16:59:57 发布

Bigbao_man

最新推荐文章于 2024-02-01 16:59:57 发布

阅读量835

点赞数 3

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/Bigbao_man/article/details/107649577

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM学习总结

主要内容

1、查找元素

2、修改元素

3、添加和删除元素

4、HTML DOM常用对象

1.查找/获取元素

1.1 可直接获取元素

document.documentElement			//获得<html>元素
document.head			//获得<head>元素
document.body			//获得<body>元素
document.forms[i]		//获得<form>元素

1.2 按节点间关系查找

节点树

父子关系：

elem.parentNode			//当前元素的父节点对象
elem.Child			//当前元素的所有直接子节点对象
elem.firstChild			//当前元素的第一个直接子节点对象
elem.laseChild			//当前元素的最后一个直接子节点对象

兄弟关系：

  elem.previousSibling			//当前元素的前一个兄弟节点对象
  elem.nextSibling			//当前元素的下一个兄弟节点对象

元素树

父子关系：

elem.parentElement			//当前元素的父元素对象
elem.Children			//当前元素的所有直接子元素对象
elem.firstElementChild			//当前元素的第一个直接子元素对象
elem.lastElementChild			//当前元素的最后一个直接子元素对象

兄弟关系：

elem.previousElementSibling			//当前元素的前一个兄弟元素对象
elem.nextElementSibling			//当前元素的下一个兄弟元素对象

1.3 按HTML特征查找

按id查找
```
document.getElementById()
```
按name属性查找
```
document.getElementsByName()
```

按class属性查找

任意父元素.getElementsByClassName()

按标签名查找
```
任意父元素.getElementsByTagName()
```

1.4 按选择器查找

查找一个
```
任意父元素.querySelector()
```
查找多个
```
任意父元素.querSelectorAll()
```

2.修改元素

2.1 修改内容

elem.innerHTML
elem.textContent

【注意】textContent与innerHTML的区别：

1、翻译特殊符号为正文

2、可以去掉内嵌子标签，只保留纯文字

2.2 修改属性

HTML标准属性

1、核心 DOM API

elem.getAttribute("属性名")
elem.setAttribute("属性名","新值")
elem.removeAttribute("属性名")
var bool = elem.hasAttribute("属性名")

2、HTML DOM API（对常用核心DOM API简化）

elem.属性名

【注意】class 属性例外，class用className表示。例：elem.className

状态属性
```
enabled（启用）
disabled（禁用）
selected（选中）
checked（下拉列表中选中）
```
【注意】状态属性不能用 核心 DOM API 修改。只能用HTML DOM的.(点)来访问，都是bool类型，通过true和false来修改。
自定义扩展属性

1、定义自定义属性

<ANY 自定义属性名="值"></ANY>

HTML 5 标准中：

<ANY data-自定义属性名="值"></ANY>

2、获取或修改自定义属性

<1>使用核心 DOM API
```
elem.getAttribute("属性名")
elem.setAttribute("属性名","新值")
elem.removeAttribute("属性名")
var bool = elem.hasAttribute("属性名")
```
【注意】HTML DOM API 只会将自定义属性存储到内存中，不会添加到标签上。

<2>HTML 5 标准中

elem.dataset.自定义属性

【注意】不需要加HTML5 标准定义时的data-。

2.3 修改样式

修改内联样式

elem.style.css属性名="值"

【注意】

1、css属性名中如果带有-(横线),需要去掉横线变为驼峰命名。例：z-index => zIndex

2、如果是带单位的数字属性：

修改时，手动拼接单位到结尾或直接用字符串。例：elem.style.width=12+'px'/elem.style.width="12px"

获取时，必须去掉结尾的px才能计算。例：parseFloat(width)

【强调】elem.style优先级最高，所以只能获取内联样式，无法获取内部样式和外部样式。
获取某元素的所有样式

1.现获取样式集合对象

var sheet = getComputedStyle(elem)

2.获取一个css属性值

sheet.csss属性

【注意】因为计算后的样式来源不确定，所以都是只读，不能修改。
批量修改

elem.style只能一句一句的修改样式，故要批量修改css样式，要通过class属性来修改。

3.添加/删除元素

3.1 添加元素（3步）

创建空元素对象

var a = document.createElement("a");
设置关键属性

a.innerHTML="go to 百度";

a.href="http://www.baidu.com";
将新对象挂载到DOM树上指定位置
- 在当前父元素下的结尾，追加一个新元素：
  
  父元素.appendChild(a);
- 在父元素下的某个子元素之前插入
  
  父元素.insertBefore(a,child);
- 替换父元素下的某一个子元素
  
  父元素.replaceChild(a,child);

【注意】尽量减少修改DOM树的次数，因为每次修改DOM都会导致重排重绘，非常耗时。

【以下两种情况注意】

如果同时添加父元素和子元素，应先将子元素添加至父元素，最后在一次性将父元素添加到DOM树上。
如果要添加多个平级子元素是，先将多个平级子元素临时加入文档片段对象中，在一次性将文档片段对象添加到DOM树上。文档片段对象将子元素送到DOM树后，自动释放。

文档片段对象：内存中，临时保存多个平级子元素的虚拟的父元素。
- 先创建一个文档片段对象
  
  var frag = document.createDocumentFragement();
- 将多个平级子元素添加到frag中
  
  frag.appendChild(child);
- 将frag添加至DOM树
  
  父元素.appendChild(frag);

3.2 删除元素

父元素.removeChild(child);

4.HTML DOM常用对象

4.1 Image对象

创建：var img = new Image();

简化createElement创建元素，但仍需向DOM树添加。

4.2 Select对象与Option对象

Select对象（代表页面上一个(下拉列表)）

属性

.selectedIndex   //快速获得当前选中项的位置
.options     //快速获得select下所有的option的集合  简化核心DOM获得：select。getElementsTagName("option");
.options.length   //获得select下option的个数
.length   //等价于.options.length
.value   //获得select中当前选中项的值 如果选中项中没有设置value，则以内容作为value

方法

.add(option)   //向select中添加一个option  【注意】不支持向文档片段中添加
.remove(i)   //移除select中i位置的option

Option对象（代表select中每个option元素）

创建：var opt = new Option(text,value);

text 为设置innerHTML，value为设置属性value的值

4.3 Table对象

Table对象管着行分组

添加行分组（自动创建并添加）

var thead = table.createTHead();
var tbody = table.createTBody();
var tfoot = table.createTFoot();

删除行分组

table.deleteTHead();
table.deleteTFoot();

获取行分组

table.tHead();
table.tFoot();
table.tBodies[i]

行分组管着行
- 添加行
  
  var tr = 行分组.insertRow(i);
  
  （在当前行分组中i位置，插入一个新行）
  
  【固定用法】
  
  行分组.insertRow(0) 开头插入
  
  行分组.insertRow() 末尾追加
- 删除行
  
  行分组.deleteRow(i);
  
  （删除行分组内的i位置的行）i是相对于行分组内的下标
  
  【固定用法】
  
  table.deleteRow(tr.rowIndex);
  
  注意：table和tr要分别获取，tr.rowIndex可获得tr在整个表中的下标位置
- 获取行
  
  行分组.rows[i]
  
  （获得当前行分组中的第i行）
行管着格
- 添加格
  
  var td = tr.insertCell(i)
  
  【固定用法】
  
  tr.insertCell() 在行末尾追加新格
  
  注意：只能创建td，不能创建th
- 删除格
  
  tr.deleteCell(i);
- 获取格
  
  tr.cells[i];

4.4 Form对象

获取

var form = document.forms[i];

属性

.elements			//可获得表单中所有表单元素的集合
.elements.length			//获得表单中所有表单元素的个数
.length等价于.elements.length

方法

form.submit()

手动调用程序控制提交表单

4.5 表单元素

获取

form.elements[i/id/name];

(中括号中可写下标、id属性、name属性)

如果表单元素有name属性，可简化为：

form.name属性;

方法

elem.focus()			//让当前表单元素获得焦点
elem.blur()			//让当前表单元素失去焦点

Bigbao_man

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
DOM学习总结

DOM学习总结主要内容1、查找元素2、修改元素3、添加和删除元素4、HTML DOM常用对象1.查找/获取元素1.1 可直接获取元素document.documentElement //获得<html>元素document.head //获得<head>元素document.body //获得<body>元素document.forms[i] //获得<form>元素1.2 按节点间关系查找节点树父子
复制链接

扫一扫