前端学习日记-log5

本文最后更新于：3 个月前

继续上次的地方继续往下学习

日志随笔

7. 节点类型判断

  • isElement 判断元素节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div id="test">
			aaa
		</div>
		<script type="text/javascript">
			var testDiv = document.createElement('div');
			var isElement = function (obj) {
				if (obj && obj.nodeType === 1) {
					if (window.Node && (obj instanceof Node)) {
						return true;
					}
					try{
						testDiv.appendChild(obj);
						testDiv.removeChild(obj);
					}catch(e){
						//TODO handle the exception
						return false;
					}
					return true;
				}
				return false;
			}
			var a = {
				nodeType: 1
			}
			console.log(isElement(document.getElementById("test"))); // true
			console.log(isElement(document.getElementById("test").nextSibling)); // false
			console.log(isElement(a)); // false
		</script>
	</body>
</html>
  • isHTML
  • isXML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>isXML</title>
	</head>
	<body>
		<div id="test">
			isXML
		</div>
		<!-- 这是一个注释节点 -->
		<script type="text/javascript">
			var isXML = function(elem) {
				var documentElement = elem && (elem.ownerDocument || elem).documentElement;
				return documentElement ? documentElement.nodeName !== "HTML" : false
			}
			console.log(isXML(document.getElementById("test")));
			
			try{
				var doc = document.implementation.createDocument(null, "HTML", null);
				console.log(doc.documentElement);
				console.log(isXML(doc));
			}catch(e){
				console.log("不支持createDocument方法")
			}
			
			var isXML2 = window.HTMLDocument ? function(doc) {
				return !(doc instanceof HTMLDocument);
			} : function(doc) {
				return "selectNodes" in doc;
			}
			
			var isXML3 = function(doc) {
				return doc.createElement("p").nodeName !== doc.createElement("p").nodeName;
			}
			console.log(isXML3(document.getElementById("test")));
		</script>
	</body>
</html>
  • contains
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>contains</title>
	</head>
	<body>
		<div id="p-node">
			<div id="c-node">
				子节点内容
			</div>
		</div>
		<script type="text/javascript">
			var pNode = document.getElementById("p-node");
			var cNode = document.getElementById("c-node");
			console.log(pNode.contains(cNode)); // IE老版本不支持contains方法
			console.log(document.contains(cNode));
			
			// 重新实现
			function fixContains(a, b) {
				try{
					while (b = b.parentNode){
						if (b === a) {
							return true;
						}
					}
					return false;
				}catch(e){
					//TODO handle the exception
					return false;
				}
			}
			console.log(fixContains(pNode, cNode));
			console.log(fixContains(document, cNode));
			var cNode1 = document.getElementById("c-node").childNodes[0];
			console.log(fixContains(pNode, cNode1));
			console.log(fixContains(document, cNode1));
		</script>
	</body>
</html>

8. DOM节点继承层次

1
2
console.log(Object.getOwnPropertyNames(document.createElement("p").__proto__));
console.log(Object.getOwnPropertyNames(document.createElement("p").__proto__.__proto__));

9. HTML嵌套规则

  • 块状元素：一般是其他元素的容器，可以容纳其他块状元素和内联元素，块状元素排斥其他元素同一行，可以设置宽高，例如div、p、ul
  • 内联元素：只能容纳文本或者其他内联元素，允许同一行，设置宽高不起作用，例如a、br、img、input、textarea
  1. 块级元素可以包含内联和某些块级元素，内联不能包含块级元素
  2. 块级元素不能放在p元素中
  3. 某些特殊的块级元素只能包含内联，不能包含块级，例如：h1~h6、p、dt
  4. li里面可以包含div标签
  5. 块级和块级并列，内联和内联并列

image_2.png

未完待续