您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168939

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

JavaScript DOM

JavaScript DOM 笔记

1DOM 介绍

**MDN 文档对象模型手册:**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

1)DOM 英文全程"Document Object Model" , 即:“文档对象模型”.

2)DOM 是一个与平台和编程语言无关的接口,通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式.

2 Node 节点

2.1 五大节点类型

document	文档节点  nodeType:9
element		元素节点  nodeType:1	nodeName 获取元素的标签名
attribute	属性节点  nodeType:2	
text		文本节点  nodeType:3	
comment		注释节点  nodeType:8

2.2 节点的属性

nodeName		获取节点的名字
nodeValue		获取节点的值
nodeType		获取节点的类型,用数字表示

3 获取元素

① 通过ID 名

document.getElementById("ID名")

总结

  1. 方法返回一个元素对象
  2. 如果没有满足条件的元素返回null .

② 通过标签名

//从文档中获取
document.getElementsByTagName("标签名");

//从元素的后代中获取
element.getElementsByTagName("标签名");

总结

  1. 方法返回一个HTMLCollection 类型的对象,这是一个伪数组对象,里面的成员是元素对象。
  2. 如果没有满足条件的元素,返回空的集合。

③ 通过类名(了解,IE8 + 支持)

// 从文档中获取
document.getElementByClassName('类名');

// 从元素的后代中获取
element.getElementsByClassName('类名');

总结

​ 1.方法返回一个HTMLCollection 类型的对象,这是一个伪数组对象,里面的成员是 元素对象。

​ 2. 如果没有满足条件的元素,返回空的集合。

④ 通过name属性值(了解)

//从文档中获取
document.getElementsByName("name属性的值");

总结

​ 1.方法返回一个 NodeList 类型的对象,与 HTMLCollection 相似,也是伪数组,里面 的元素是元素对象。

​ 2. 如果没有满足条件的元素,返回空的集合。

⑤ 使用选择器获取元素(推荐)

// 从文档中获取
document.querySelector('选择器');
document.querySelectorAll('选择器');

// 从元素的后代中获取
element.querySelector('选择器');
element.querySelectorAll('选择器');

总结

  1. querySelector() 方法返回一个元素对象,如果满足条件的元素有多个只取第一个,如果没有满足条件的元素返回null。
  2. querySelectorAll() 方法返回NodeList 集合,如果没有满足条件的元素的返回集合。

⑥ 获取所有的元素

document.all

总结:获取文档中的所有元素,是个HTMLCollection 类型的集合

注意:使用document .all 可以判断IE 还是 非IE ,这是一个语法糖

if (document.all) {
document.write('我是IE浏览器!');
} else {
document.write('我不是IE');
}

4 文档结构(元素关系)

4.1 节点树

childNodes		获取所有子节点的集合,是个 NodeList 类型的对象
firstChild		获取第一个子节点
lastChild		获取最后一个子节点

previousSibling	 获取紧邻在前面的兄弟节点
nextSibling		 获取紧邻在后面的兄弟节点

parentNode		 获取父节点

4.2 元素树

children 				获取所有子元素的集合,是个HTMLCollection 类型的数据
firstElementChild		获取第一个子元素
lastElementChild		获取最后一个子元素

previousElementSibling	获取紧邻在前面的兄弟元素
nextElementSibling		获取紧邻在后面的兄弟元素

parentElement			获取父元素

6 元素的属性操作

6.1 读写内置属性

元素.属性名;

6.2 读写自定义属性

元素.getAttribute("属性名")			读取属性的值,如果不存在该属性返回 null
元素.setAttribute("属性名","值")		设置属性的值,如果属性不存在会添加该属性

注意

  1. getAttribute() 和 setAttribute() 可以操作写在标签上的所有属性,不论内置的还是自定义的。
  2. 如果要操作的属性是内置,使用.属性名的方式;如果要操作的属性是自定义的再使用getAttribute() 和 setAttribute()。

6.3 data-*形式的自定义属性

HTML5标准建议标签中的自定义属性都是data-messagedata-group-name这样的形式,此种形式的自定义属性,DOM 提供了快捷的操作方式:

元素.dataset.属性名;    //可读可写

imgEle.dataset.message;		//对应的是 data-message 属性
imgEle.dataset.groupName;	//对应的是 data-group-name	属性

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进