循环遍历HTML DOM对象

最新推荐文章于 2021-06-30 12:41:51 发布

原创最新推荐文章于 2021-06-30 12:41:51 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM #遍历

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中高效地遍历HTML DOM对象，包括使用节点遍历方法、递归遍历以及选择器API来访问和操作元素。通过实例代码，深入理解DOM遍历在网页动态更新和数据绑定中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//Call code
var htmlStr = '<style type="text/css"> .rdp_banner_wrapper { border: 1px solid #CECFCE; padding: 12px; margin:4px 0px; } .rdp_main_text_wrapper { margin-bottom: 10px; } .rdp_main_text { font-weight: bold; font-size: 16px; } .rdp_note_text_wrapper{ margin:10px 0px; } .rdp_note_text_wrapper span{ font-size:16px; } .rdp_btn { font-size: 14px; text-shadow: 0px -1px 1px #3e6417; text-decoration: none; background-image: linear-gradient(#A1DA42, #7EC014, #558110); box-shadow: 0px 2px 3px #999; border-radius: 4px; color: #fff; font-weight: bold; display: inline-block; padding: 8px 70px; } .rdp_btn:hover { text-decoration: none; color: #fff; font-weight: bold; font-size: 14px; } </style> <div class="rdp_banner_wrapper"> <div class="rdp_main_text_wrapper"> <span class="rdp_main_text">Your Hang Seng Credit Card Interest-free Cash Instalment Plan online application not yet completed</span> </div> <div class="rdp_note_text_wrapper"> <!-- RDP Banner --><span name="ins">*Please ignore if application has been submitted.</span><br/> <span>To borrow or not to borrow? Borrow only if you can repay!</span> </div> <div class="rdp_cta_wrapper"> <a id="rdp_btn_cta" class="rdp_btn" href="/1/2/pib/cards-services/low-interest-instalment-offer/cash-instalment?pid=$/*/target$:rdp-svc:cardloan-cashinstal:rdp-ci-dropoff_201901_svc:shared-dt-p">Apply again</a> </div> </div>';
searchHtmlByKeys(htmlStr, '<!-- RDP Banner -->|To borrow or not to borrow');

/**
 * Filter HTML tags
 * @param elementStr HTML element string
 * @param filterStrs Filter strings, separated by "|", e.g.:"1|2|3"
 */
function searchHtmlByKeys(elementStr, filterStrs) {
	// Return directly when empty
	if (!filterStrs) {
		return;
	}
	var filterArray = filterStrs.split("|");
	//Array of results
	var Result = [];
	var el = document.createElement('html');

	//Determine whether to load test data
	el.innerHTML = elementStr ? elementStr : '<style type="text/css"> .rdp_banner_wrapper { border: 1px solid #CECFCE; padding: 12px; margin:4px 0px; } .rdp_main_text_wrapper { margin-bottom: 10px; } .rdp_main_text { font-weight: bold; font-size: 16px; } .rdp_note_text_wrapper{ margin:10px 0px; } .rdp_note_text_wrapper span{ font-size:16px; } .rdp_btn { font-size: 14px; text-shadow: 0px -1px 1px #3e6417; text-decoration: none; background-image: linear-gradient(#A1DA42, #7EC014, #558110); box-shadow: 0px 2px 3px #999; border-radius: 4px; color: #fff; font-weight: bold; display: inline-block; padding: 8px 70px; } .rdp_btn:hover { text-decoration: none; color: #fff; font-weight: bold; font-size: 14px; } </style> <div class="rdp_banner_wrapper"> <div class="rdp_main_text_wrapper"> <span class="rdp_main_text">Your Hang Seng Credit Card Interest-free Cash Instalment Plan online application not yet completed</span> </div> <div class="rdp_note_text_wrapper"> <!-- RDP Banner --><span name="ins">*Please ignore if application has been submitted.</span><br/> <span>To borrow or not to borrow? Borrow only if you can repay!</span> </div> <div class="rdp_cta_wrapper"> <a id="rdp_btn_cta" class="rdp_btn" href="/1/2/pib/cards-services/low-interest-instalment-offer/cash-instalment?pid=$/*/target$:rdp-svc:cardloan-cashinstal:rdp-ci-dropoff_201901_svc:shared-dt-p">Apply again</a> </div> </div>';

	//Get all the elements
	//var allElement = document.getElementsByTagName("*");
	var allElement = el.getElementsByTagName("*");

	//Traversing all elements, if matched with the given argument, the element is placed in the Result array, e.g.:
	//allElement[n].getAttribute("id/class/name").trim().startsWith('rdp');
	//allElement[n].innerHTML.trim().startsWith('<!-- RDP Banner -->');
	for (var i = 0; i < allElement.length; i++) {
		var attributeArray = ["id", "class", "name"];
		var attributeName = allElement[i].getAttribute("id");
		if (attributeName) {
			attributeArray.forEach(v => {
				filterArray.forEach(v => {
					if (attributeName.trim().startsWith(v)) {
						Result.push(attributeName);
					}
				})
				console.log("attributeName:" + v + ",Value:" + attributeName);
			});
		}
		var innerHTML = allElement[i].innerHTML;
		console.log("innerHTML:" + innerHTML);
		if (innerHTML) {
			filterArray.forEach(v => {
				if (innerHTML.trim().startsWith(v)) {
					Result.push(innerHTML);
				}
			})
		}
	}
	//Return the last result array
	return Result;
}