DOM(document object model)

最新推荐文章于 2022-06-27 09:14:31 发布

weixin_50212969

最新推荐文章于 2022-06-27 09:14:31 发布

阅读量40

点赞数

分类专栏： JavaScript 文章标签： js dom

本文链接：https://blog.csdn.net/weixin_50212969/article/details/119350430

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

遍历节点树

parentNode-----------------父节点（最顶层：#document）
childNodes------------------子节点们
firstChild---------------------第一个子节点
lastChild---------------------最后一个子节点
nextSibling------------------后一个兄弟节点
previousSibling-------------前一个兄弟节点

遍历元素节点

parentElement-------------返回当前元素的父元素节点（IE8不兼容）
children-------------------- 只返回当前元素的元素子节点
firstElementChild----------第一个元素节点（IE8不兼容）
lastElementChild----------最后一个元素节点（IE8不兼容）
node.childElementCount === node.children.length 当前子节点的子元素节点个数（IE8不兼容）
nextElementSibling/previousElementSibling 后一个/前一个兄弟元素节点（IE8不兼容）

节点的四个属性

nodeName
- 元素的标签名，以大写形式表示，只读
nodeValue
- Text节点或Comment节点的文本内容，可读写
nodeType
- 该节点的类型，只读
- 元素节点---------------------------1
- 属性节点---------------------------2
- 文本节点---------------------------3
- 注释节点---------------------------8
- document--------------------------9
- DocumentFragment--------------11
attributes
- Element节点的属性组合

节点的方法

Node.hasChildNodes()-----------该元素是否拥有子节点

	document.__proto__; //HTMLDocument
	HTMLDocument.__proto__;//Document
	Document.__proto__;//Node
	Node.__proto__;//EventTarget
	EventTarget.__ptoto__;//Object

DOM基本操作

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

增

var div = document.createElement('div');//创建元素节点
var text = document.createTextNode('文本');//创建文本节点
var comment = document.createComment('注释');//创建注释节点
var Frament = document.createDocumentFragment();//创建文档碎片节点

插

parentNode.appendChild(text);
- 若text为新创建的元素，执行appendChild相当于push操作，若为已存在的元素则相当于剪切后再执行push操作
·parentNode.insertBefore(a,b);
- 在b元素之前插入a元素，若a元素是页面中存在的元素，则是先剪切后插入

删

parentNode.removeChild(el);//剪切掉父元素中的el元素，返回剪切掉的元素
child.remove();//销毁自身

替换

parentNode.replaceChild(new,origin);
- 新元素替换旧元素，返回值为旧元素

属性

innerHTML
innerText(老版本火狐不兼容) / textContent(老版本IE不兼容)

实现insertAfter方法

	Element.prototype.insertAfter = function(targetNode,afterNode){
		var beforeNode = afterNode.nextElementSibling;
		if(beforeNode == null){
			this.appendChild(targetNode);
		}else{
			this.insertBefore(targetNode,beforeNode);
		}
	}

weixin_50212969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM(document object model)

遍历节点树parentNode-----------------父节点（最顶层：#document）childNodes------------------子节点们firstChild---------------------第一个子节点lastChild---------------------最后一个子节点nextSibling------------------后一个兄弟节点previousSibling-------------前一个兄弟节点遍历元素节点parentElemen
复制链接

扫一扫