javascript-DOM

最新推荐文章于 2024-05-12 06:39:14 发布

游啊游游啊

最新推荐文章于 2024-05-12 06:39:14 发布

阅读量109

点赞数

分类专栏：前端学习 javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_39715822/article/details/106378852

版权

前端学习同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

javascript

17 篇文章 0 订阅

订阅专栏

DOM

定义
基本操作
结构树
note

定义

DOM — > Document Object Model
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

基本操作

对节点的增删改查

查看元素节点

document(对象)：代表整个文档
document.getElementById() //元素id，在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
getElementsByTagName() // 标签名，返回类数组，写'*'选择所有标签
getElementsByName(); //元素name，需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有，可以多个class一起
querySelector() // css选择器在ie7和ie7以下的版本中没有，非实时
querySelectorAll() // css选择器在ie7和ie7以下的版本中没有，非实时

节点的类型

元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型： nodeType

节点的四个属性

nodeName：节点的名，以大写形式表示,只读
nodeValue：Text节点或Comment节点的文本内容,可读写
nodeType：该节点的类型，只读，返回节点类型值
attributes：Element 节点的属性集合

节点的一个方法 Node.hasChildNodes();

遍历节点树：

parentNode -> 父节点 (最顶端的parentNode为#document);
childNodes -> 子节点们
firstChild -> 第一个子节点
lastChild -> 最后一个子节点
nextSibling->后一个兄弟节点 previousSibling->前一个兄弟节点

空格，换行也是节点。

遍历元素节点树

parentElement -> 返回当前元素的父元素节点 (IE不兼容) (以下IE不兼容指的是 9 以下)
children -> 只返回当前元素的元素子节点
node.childElementCount === node.children.length当前元素节点的子元素节点个数(IE不兼容)
firstElementChild -> 返回的是第一个元素节点(IE不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE不兼容)

增

document.createElement();//创建元素节点
document.createTextNode();
document.createComment();
document.createDocumentFragment();

插

PARENTNODE.appendChild();//剪切，重复后者有效。
PARENTNODE.insertBefore(a, b)😕/在a里面插入b

删

parent.removeChild(); //剪切
child.remove(); //删除

替换

parent.replaceChild(new, origin);

属性

Element节点的一些属性
- innerHTML
- innerText(火狐不兼容) / textContent(老版本IE不好使)
Element节点的一些方法
- ele.setAttribute()
- ele.getAttribute();

结构树

在这里插入图片描述

getElementById方法定义在Document.prototype上，即Element节点上不能使用。
getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用(xml document,Element)
getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
HTMLDocument.prototype定义了一些常用的属性，body,head,分别指代HTML文档中的<body> <head>标签。
Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素
getElementsByClassName、querySelectorAll、querySelector在Document.prototype,Element.prototype类中均有定义

note

xml中的标签可以自定义

<div></div>
<script type = "text/javascript">
var div = document.getElementsByTagName('div');
div.style.width = '100px';
div.style.heigth = '100px';
div.style.backgroundColor = 'red';
div.onclick = function(){
		this.style.backgroundColor = 'yellow';
}
<script>