Bjb Code

获取元素

在 JS 中，获取元素是操作 DOM 的重要部分之一。通过获取元素，可以对其进行修改、添加或删除。

获取元素

<script>
	/* 获取元素对象的方法 */
	document.getElementById("id 的值");				// 根据 id 获取元素，返回指定元素
	document.getElementsByName("name 属性的值");		// 根据 name 属性的值获取元素，返回数组
	document.getElementsByTagName("标签名");		// 根据标签名获取元素，返回数组
	document.getElementsByClassName("class的值");	// 根据 class 名称获取元素，返回数组
	document.querySelector("选择器的名字");			// 根据 CSS 选择器获取第一个匹配的元素
	document.querySelectorAll("选择器的名字");		// 根据 CSS 选择器获取匹配的元素，返回数组
	document.body;				// 获取 body 元素（含 body 中的内容）
	document.title;				// 获取 title 标签中的值（不含 title 标签，仅值）
	document.title = "新页面";	// 修改 title 标签中的值
	document.documentElement;	// 获取整个 html 文档元素
	
	/* 根据选 CSS 选择器（id选择器、类选择器）获取元素，并设置元素的式样 */
	var obj = document.querySelector("#querySel");	
	obj.style.width = "300px";			// 设置元素的宽（因为这里设置的是 css，所以需要加单位 px）
	obj.style.height = "200px";			// 设置元素的高（因为这里设置的是 css，所以需要加单位 px）
	obj.style.backgroundColor = "red";	// 设置元素的背景色
</script>

自定义属性

在 JavaScript 中，可以使用自定义属性为 HTML 元素添加额外的信息。这些自定义属性不是 HTML 规范中定义的属性，但可以通过 JavaScript 代码来访问和操作。

要在 HTML 元素中添加自定义属性，可以使用 data-* 属性。其中 * 可以替换为任何自定义的名称。例如，要为一个按钮元素添加自定义属性 data-action ：

<button id="my-button" data-action="submit">Submit</button>

然后，可以使用 js 来获取和操作这个自定义属性的值：

const button = document.getElementById('my-button');
// dataset 是一个 DOMStringMap 对象，它包含了元素上所有以 data-* 开头的自定义属性。可以通过 dataset 对象来访问和修改这些自定义属性。
const action = button.dataset.action;
// 输出：submit
console.log(action);

// 修改自定义属性的值
button.dataset.action = 'cancel';

除了 dataset，还可以使用 getAttribute 和 setAttribute 方法来获取和设置自定义属性的值：

document.getElementById("tagId").onclick = function(){
	// 设置自定义属性（如果是标签自带的属性，可以直接点出来，无需通过 setAttribute 设置）
	document.getElementsByTagName("div")[0].setAttribute("data-click-number","50");		// [0] 代表返回数组中的第一个元素，setAttribute 里面分别是属性名和属性值
	// 获取自定义属性（如果是标签自带的属性，可以直接点出来，无需通过 getAttribute 获取）
	var obj = document.getElementsByTagName("div")[0].getAttribute("data-click-number");	// getAttribute 里面填属性名就返回属性值，填属性值就返回属性名，没有就返回 null
	alert(obj);
	// 删除属性（既可以删除自定义的属性，也可以删除标签自带的属性）
	document.getElementsByTagName("div")[0].removeAttribute("data-click-number");
}

设置文本

// 设置任何标签中间的任意文本内容
// 如果一个属性在浏览器中不支持，那么这个属性在浏览器中的类型就是 undefined
function setInnerText(element,text){
	// 判断浏览器是否支持这个属性
	if(typeof(element.textContent) == "undefined"){	// 不支持 textContent
		element.innerText = text;
	}else{	// 支持 textContent
		element.textContent = text;
	}
}

// 获取任何标签中间的任意文本内容
// 如果一个属性在浏览器中不支持，那么这个属性在浏览器中的类型就是 undefined
function getInnerText(element){
	// 判断浏览器是否支持这个属性
	if(typeof(element.textContent) == "undefined"){	// 不支持 textContent
		return element.innerText;
	}else{	// 支持 textContent
		return element.textContent;
	}
}