javascript DOM操作

向右看齐 2022-07-16 00:38 256阅读 0赞

## DOM ##

文档对象模型  
当网页被加载时，浏览器会创建页面的文档对象模型

通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTML  
javascript能够改变页面中的所有HTML元素  
javascript能够改变页面中的所有HTML属性  
javascript能够改变页面中的所有CSS样式  
javascript能够对页面中的所有事件做出反应

## DOM节点树 ##

DOM模型被构造为对象的树  
这棵树的根就是document对象

![这里写图片描述][20160925154347371]

## DOM操作 ##

**查找节点**  
**读取节点信息**  
**修改节点信息**  
**创建新节点**  
**删除节点**

## 读取、修改某一个节点的内容 ##

节点信息  
nodeName： 节点名称  
元素节点和属性节点：标签或者属性名称  
文本节点： 永远是\#text  
文档节点： 永远是\#document  
nodeType： 节点类型  
返回数值  
元素节点： 返回1  
属性节点： 返回2  
文本节点： 返回3  
注释节点： 返回8  
文档节点： 返回9

**用 document.getElementById(“”);取到的是节点，**  
如：  
var t = document.getElementById(“t1”);  
然后t.nodeName 就会返回这个节点的名，比如返回TABLE  
t.nodeType 会返回对应的数字

## 元素节点的内容 ##

innerText  
设置或获取位于对象起始和结束标签内的文本  
innerHTML  
设置或获取位于对象起始和结束标签内的HTML

用innerHTML会返回包括标签，空格的所有。。。都有  
但是用innerText会返回只有这个节点的所有文本，不包含标签等等。

## 节点属性 ##

getAttribute()方法：根据属性名称获取属性的值  
setAttribute()方法、removeAttribute()

t.getAttribute(“width”);获取t节点的width属性的值  
然后，设置  
t.setAttribute(“width”,”30%”)  
设置了t节点的width属性的值为30%；

## 移除节点的属性 ##

t.removeAttribute(“width”)  
移除t节点的width属性；

## 元素节点的样式 ##

style属性  
node.style.color  
node.style.fontSize  
className属性

例如：

6666123qwe

var o = document.getElementById(“p1”);  
o.style.color = “red”;  
o.style.fontSize = 20;  
//或者

o.className = “样式类名称”;

可以用 js来控制修改样式。

## 查询节点 ##

如果需要操作HTML元素，必须首先找到该元素  
查询节点的方式：  
通过id查询  
通过层次（节点关系）查询  
通过标签名称查询  
通过name属性查询

**根据ID查询就是那个getElementById(“ ”);**

## 根据层次查询节点 ##

parentNode  
遵循文档的上下层次结构，查找单个父节点  
childNodes  
遵循文档的上下层次结构，查找多个子节点

**不能直接去找兄弟，要先找父亲，然后找用父亲找孩子，返回数组，然后下标定位，找到兄弟**

想找兄弟，要先去找上级

## 根据标签名查询节点 ##

getElementsByTagName()  
根据指定的标签名称返回所有的元素  
忽略文档的结构  
查找整个HTML文档中所有的元素  
如果标签名错误，则返回长度为0的节点列表  
返回一个节点列表（数组）  
使用节点列表的length属性获取个数

## 根据name属性节点查询节点 ##

document.getElementsByName()  
根据标签的name属性的值进行查询

**如:**

var nodes = document.getElementsByName(“sex”);
    alert(nodes.length);   //2

记得之前学的写选择框中，一个name的只能选一个~

一个name是一组，可以用ByName去取一个组

![这里写图片描述][20160925154441308]

## 查询节点总结： ##

**1、document.getElementById(id)**  
根据id查询节点

**2、element.parentNode**  
获取节点的父亲  
element.chilNodes  
获取节点的所有孩子，包括空格  
element.getElementsByTagName(元素名)  
获取节点的孩子，不包括空格

**3、document.getElementByName(name)**  
根据名称查询节点，得到一组同名的节点，常用在表单中。

## 增加删除创建节点 ##

**创建节点**  
document.createElement(elementName)  
elementName:要创建的额元素标签名称  
返回新创建的节点

**//创建新节点**

var newNode = document.createElement(“input”);

**//设置节点的信息**  
newNode.type = “text”;  
newNode.value = “mary”;  
newNode.style.color = “red”;

先创建节点，节点的标签，然后就是在js代码中设置节点的信息。

**1、创建新节点，没有显示，处于游离状态**  
var a = document.createElement(元素名);  
a.属性 = “ ”;

**2、将新节点插入到某个元素下**  
element.appendchild(a);  
将节点a插入到element下，作为最小的孩子。  
element.insertBefore(a，e); //e作为参照  
将节点a插入到element下，作为其最大的孩子。

比如在一个ul下增加一个li  
首先创建一个li，然后插入到ul元素下，插入分别为最后一个和第一个

![这里写图片描述][20160925154515058]

![这里写图片描述][20160925154544309]

**用inserBefore(**新节点，E)；  
要在哪加新节点，写了个E就是在E前面加个新节点

![这里写图片描述][20160925154610809]

**出错了就是因为没有写参照的节点。。。要写参照的节点还要获取那个参照的节点。然后传入参数。**

## 删除节点 ##

node.removeChild(childNode)  
**删除某个节点**  
childNode 必须是node的子节点

由父节点删除其下属的某个子节点。

![这里写图片描述][20160925154653357]

**获取要删除的节点，获取其父节点，然后父节点删除其子节点。**

！！！也可以直接子节点点parentNode.removeChile(子节点)这么的更快一些。

[20160925154347371]: /images/20220716/b5f92feada854c508efaa99848370c83.png
[20160925154441308]: /images/20220716/8920bafbdb7c4f20a35075689b9fc7cf.png
[20160925154515058]: /images/20220716/bf42428b57524534a35bf071f1e68f69.png
[20160925154544309]: /images/20220716/9454b1d7c55e4856887415a5ae858922.png
[20160925154610809]: /images/20220716/c34b09cb1e4c4f5fb9376fda08095144.png
[20160925154653357]: /images/20220716/ea38a73674a247f0a8890230364a18bf.png