<tr>
<tr>
在复习js的dom知识的时候发现了
<tr>
标签的问题
请看下面这段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="sheet">
<tr id="row">
<td>apple</td>
<td>pear</td>
</tr>
</table>
<script>
let tr = document.getElementById("row"); // 获得tr元素
let child = tr.firstChild; // 获得tr元素的第一个子元素
console.log(child.nodeName);
console.log(child.innerText);
</script>
</body>
</html>
console.log(child.nodeName)
的结果为
#text
console.log(child.innerText)
的结果为
undefined
解释：
<tr>
的第一个子元素为空白的纯文本元素
再看下面这段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="sheet">
<tr id="row">banana <!-- 注意这个位置有个内容为“banana”的纯文本元素 -->
<td>apple</td>
<td>pear</td>
</tr>
</table>
<script>
let tr = document.getElementById("row"); // 获得tr元素
let child = tr.firstChild; // 获得tr元素的第一个子元素
console.log(child.nodeName);
console.log(child.innerText);
</script>
</body>
</html>
console.log(child.nodeName)
的结果为
TD
console.log(child.innerText)
的结果为
apple
解释：
<tr>
标签的第一个子元素为
apple
再看两种情况下遍历子元素的比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="sheet">
<tr id="row">
<td>apple</td>
<td>pear</td>
</tr>
</table>
<script>
let tr = document.getElementById("row"); // 获得tr元素
let child = tr.childNodes; // 获得tr元素的第一个子元素
for(let i = 0; i < child.length; i++){
console.log(child[i].nodeName);
}
</script>
</body>
</html>
结果为
#text
TD
#text
TD
#text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="sheet">
<tr id="row">banana
<td>apple</td>
<td>pear</td>
</tr>
</table>
<script>
let tr = document.getElementById("row"); // 获得tr元素
let child = tr.childNodes; // 获得tr元素的第一个子元素
for(let i = 0; i < child.length; i++){
console.log(child[i].nodeName);
}
</script>
</body>
</html>
结果为
TD
#text
TD
#text
于是我推论当
<tr>
内的任意位置
<tr>
和
<td>
，
</td>
和
<td>
,
</td>
和
</tr>
之间有空白的纯文本时，纯文本元素是会被js解析到的；而当
<tr>
内的任意位置
<tr>
和
<td>
，
</td>
和
<td>
,
</td>
和
</tr>
之间有纯文本内容时（文本不为空白）该处的文本虽然会被渲染到页面中，但该处的文本不是
<tr>
的子元素
于是我继续尝试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="sheet">
<tr id="row">banana
<td>apple</td>watermelon
<td>pear</td>
</tr>
</table>
<script>
let tr = document.getElementById("row"); // 获得tr元素
let child = tr.childNodes; // 获得tr元素的第一个子元素
for(let i = 0; i < child.length; i++){
console.log(child[i].nodeName);
}
</script>
</body>
</html>
结果为
TD
TD
#text
推论成立
于是我猜想
<ul>
，
<ol>
是不是也与
<tr>
相同，经过验证之后发现
<ul>
，
<ol>
与
<tr>
不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul id="row">banana
<li>apple</li>
<li>pear</li>
</ul>
<script>
let ul = document.getElementById("row");
let li = ul.childNodes;
let text = li[0];
for(let i = 0; i < li.length; i++){
console.log(li[i].nodeName);
}
</script>
</body>
</html>
结果为
#text
LI
#text
LI
#text
<tr>
<tr>
当
<tr>
直接写在
<table>
中时，其默认直接父元素为
<tbody>
，而写在
<thead>
、
<tfoot>
中时其父元素分别是
<thead>
，
<tfoot>
，当
<tr>
直接写在
<table>
中时
会被解析为
<tbody><tr></tr></tbody>
。
<table>
<table>
table的直接子元素为
<thead>
、
<tfoot>
、
<tbody>
，
<table>
的三种直接子元素可以重复出现多次，并且直接写在
<table>
的
<tr>
会影响纯文本元素的解析
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)