Element类型

Posted 2020-10-13 gaoxuerong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Element类型相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Element类型（html元素，操作特性  attributes 属性， 创建元素,元素的子节点）</title>
	</head>

	<body>
		<div id="myDiv" class="bd" title="Body text" lang="en" onclick="function click(i){
			alert(i);
		}">v</div>

	</body>
	<script>
		/*Element
				节点具有以下特征：nodeType的值为1；?nodeName的值为元素的标签名；?nodeValue的值为null；?
				parentNode可能是Document或Element；
				?其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。
				要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性 
				* */
		var div = document.getElementById("myDiv");
		console.log(div);
		console.log(div.id);
		console.log(div.className);
		console.log(div.title); //"Body text" 
		console.log(div.lang); //"en" 
		console.log(div.dir); //" "
		div.id = "someOtherId";
		div.className = "ft";
		div.title = "Some other text";
		div.lang = "fr";
		console.log(div.id);
		console.log(div.className);
		console.log(div.title); //"Body text" 
		console.log(div.lang);
		/*操作特性的DOM方法主要有三个，分别getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用
		 自定义特性应该加上data-前缀以便验证。
		 通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即"ID"最终会变成"id"。
		 像下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性。div.mycolor = "red"; alert(div.getAttribute("mycolor")); //null（IE除外）
		 * 
		 * */
		function click(i){
			alert(i);
		}
		var cli=div.getAttribute(‘onclick‘);
		console.log(cli);
		div.removeAttribute("class");
		console.log(div.className);
		console.log(div);
		/*
		 document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名这个标签名在 HTML 文档中不区分大小写，而在 XML（包括 XHTML）文档中，
		 则是区分大小写的。在使用 createElement()方法创建新元素的同时，也为新元素设置了 ownerDocuemnt 属性。此时，还可以操作元素的特性，为它添加更多子节点，
		 由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。
		 
		 * */
		
		/*
		 元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
		 元素也支持getElementsByTagName()方法。
		 * * */
	</script>

</html>

以上是关于Element类型的主要内容，如果未能解决你的问题，请参考以下文章

TP5报如下的错误 Indirect modification of overloaded element of thinkpaginatorCollection has no effect(代码片段

maven web项目的web.xml报错The markup in the document following the root element must be well-formed.(代码片段

VSCode自定义代码片段5——HTML元素结构

JAXB的@XmlElement注解