dom

最新推荐文章于 2022-07-04 20:19:44 发布

Venciki

最新推荐文章于 2022-07-04 20:19:44 发布

阅读量102

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/95952499

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

DOM结构树

封装一个函数( 找 i 标签的父元素节点)

	<body>
		<div>
			<strong>
				<span>
					<i></i>
				</span>
			</strong>
		</div>
	</body>
	<script>
		function retParent(elem, n) {
        while(elem == null && n) {
            elem = elem.parentElement;
            n --;
        }
        return elem;
    	}   
    	var i = document.getElementsByTagName('i')[0];
	</script>

结果：
在这里插入图片描述

封装一个函数找他的子元素节点

	<body>
		<div>
    	<p></p>
   	 	<a href=""></a>
    	123
    	<!--qwer-->
    	<strong>
       	 	<span>
            <i></i>
        	</span>
    	</strong>
</div>

	</body>
	<script>
		Element.prototype.chidrenNodes = function() {
			var child = this.childNodes;
			var len = child.length;
			var arr = [];
			for( var i = 0; i < len; i ++) {
				if(child[i].nodeType = 1) {
					arr.push(child[i]);
				}
			}
			return arr;
		}
		var div = document.getElementsByTagName('div')[0];
	</script>

我们试一下返回结果：
在这里插入图片描述

DOM基本操作

增：

增加元素节点document.createElement()
增加文本节点document.createTextNode()
增加注释节点document.createComment()

appendChild() 跟push类似,都是插入到最后一个
insertBefore(a, b) ----> insert a Before b
这里我们写个例子：

<body>
	<div>
		<span></span>
	</div>
</body>
<script>
	var div = document.getElementsByTagName('div')[0];
    var span = document.getElementsByTagName('span')[0];
    var strong = document.createElement('strong');
    div.insertBefore(strong, span);
</script>

我们看看结果：
在这里插入图片描述
这样strong就被插入到span之前了

parent.removeChild() 括号里面填子节点,子节点就被剪切出来。
child.remove() 会直接删除该节点。

替换

parentNode.replaceChild(new, origin); 拿新的元素替换老的元素。

div.innerHTML = 123 -----> 会把原来的div中的内容用123替换掉
而div.innerHTML +=123 ------>可以加在原来内容的后面
innerText 这里用个例子来看：

<body>
	<div>
		<span>123</span>
		<a>234</a>
	</div>
</body>
<script>
	var div = docuemnt.getElementsByTagName('div');
</script>

innerContent
setAttribute 给标签设置一个行间属性
div.setAttribute(‘class’, ‘demo’) 括号里面前面是属性名，后面的是属性值。
getAttibute 取一个属性值：

	<body>
	<div id = "demo">
	</div>
	</body>
	<script>
		var div = doument.getElementsByTagName('div')[0];
		div.getAttritube('id');
	</script>
	/*这串代码返回的结果就是 demo*/

例子：
（在一个body是空的页面中间添加这样的样式：

<div class='demo'>
	<p class='slogan'>我最帅</p>
</div>

下面是代码：

	var div = document.createElement('div');
    var p = document.createElement('p');
    var text = document.createTextNode('我最帅');
    div.setAttribute('class', 'example');
    p.setAttribute('class', 'slogan');
    p.appendChild(text);
    div.appendChild(p);

此时看效果：
在这里插入图片描述
封装一个insertAfter方法

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