3

HTML：

<td class="tabletd"> text one </td><br>
<td class="tabletd" id="tdSecond"> this is next td</td>
<button onclick="myFunc()">click</button>

JS：

function myFunc() {
    var second    = document.getElementById('tdSecond').innerHTML;
    //var second2 = document.getElementsByTagName('td')[1]; //gives error undefined
    alert(second);
}

我无法完成这项工作。即使没有 css 的效果，请参阅JSFiddle。但是如果我们在没有 parent 的情况下
使用 javascript 和 css 都可以正常工作。 并且 javascript 和 css 在自定义标签上也可以正常工作。例如：-<li><ul>
<ddd> text </ddd>

那么，如果我们在<td>没有父级的情况下使用 css 和 javascript，为什么会出现错误<table>呢？

4

3 回答 3

5

这可以解释为什么<li>项目可以没有<ul>
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-li-element

li 元素表示一个列表项。如果其父元素是 ol、ul 或 menu 元素，则该元素是父元素列表中的一项，如为这些元素定义的那样。否则，列表项与任何其他 li 元素没有定义的列表相关关系。

如果父元素是 ol 元素，则 li 元素具有序号值。

<ul>只是为了对类似的<li>项目进行分组。没有<ul>, a<li>只是一个单独的列表项，没有任何分组。因此，<li>没有 a<ul>仍然是解析器将通过的有效标记。


<td>并且<tr>元素特别地必须驻留在一个<table>元素中。 http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element

这就是解析器形成表格的方式，并且<td>没有 a<table>将引发表格模型错误： http:
//www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#table -模型

该测试表明：

<!-- fail -->
<tr>
  <td>tr_td_test</td>
</tr>

<!-- fail -->
<td>td_test</td>

<!-- pass as a regular list item -->
<li>li_test</li>

<!-- pass and tr tag is added to DOM -->
<table>
  <td>table_td_test 1</td>
</table>

<!-- pass and td tag is added to DOM -->
<table>
  <tr>
    table_tr_test_1
  </tr>
</table>
于 2012-12-19T07:01:58.157 回答
4

如果您检查 chrome 中的元素，您会注意到代码已更改为以下内容：

<body>
    text one <br>
    this is next td
    <button onClick="myFunc()">click</button>
    <script type="text/javascript">//<![CDATA[ 

    function myFunc() {
    var second=document.getElementById('tdSecond').innerHTML;
    alert(second);

    //var second2=document.getElementsByTagName('td')[1].innerHTML;
    //alert(second2);  
    }

    //]]>  

    </script>
</body>

td 元素已被浏览器删除，因为它们无效。

于 2012-12-19T05:25:47.293 回答
-2

试试这个。有html问题。试试这个 html

    <table border="1">
<tr>
<td class="tabletd"> text one </td><br>
<td class="tabletd" id="tdSecond"> this is next td</td>
</tr>
</table>
<button onclick="myFunc()">click</button>
于 2012-12-19T05:23:39.793 回答