offsetParent,parentNode,parentElement 区别
offsetParent
指与位置有关的上级元素
parentNode
指与位置无关的上级元素
parentElement 和 parentNode一样,但parentNode是W3C标准的parentElement 只在IE中可用.
第一种方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = -1;
function showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>";
if(row != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
row = rowIndex;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE id="tb">
<TR>
<TD><input type="radio" onclick="showEdit(this)" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" onclick="showEdit(this)" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" onclick="showEdit(this)" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
第二种方法
<table border=1 width=100%>
<tr>
<td><input name=m type=checkbox onclick="mm(this)"></td>
<td>1111</td>
<td><input name=aaa value="222" disabled></td>
<td><input name=bbb value="333" disabled></td>
</tr>
<tr>
<td><input name=m type=checkbox onclick="mm(this)"></td>
<td>1111</td>
<td><input name=aaa value="222" disabled></td>
<td><input name=bbb value="333" disabled></td>
</tr>
<tr>
<td><input name=m type=checkbox onclick="mm(this)"></td>
<td>1111</td>
<td><input name=aaa value="222" disabled></td>
<td><input name=bbb value="333" disabled></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i<inputObjs.length;i++)
{
if(inputObjs[i]==e) continue;
inputObjs[i].disabled=!e.checked;
}
}
</SCRIPT>
分享到:
相关推荐
下面我们将详细讲解`childNodes`的用法,并结合提供的代码示例进行分析。 首先,我们来看第一个例子: 在这个例子中,`childNodes`被用来获取表格行中的单元格元素。当用户点击某行的单选按钮时,`showEdit`函数会...
本文将详细解析`parentNode`、`parentElement`、`childNodes`和`children`之间的区别。 首先,`parentNode`和`parentElement`都是用于获取一个元素的父级节点。它们的主要区别在于兼容性。`parentNode`是W3C标准的...
1. **使用通用的DOM访问方法**:用`parentNode`代替`parentElement`,因为并非所有浏览器都支持`parentElement`。 2. **创建自定义函数以获取CheckBox对象**:编写`GetCheckBoxObj`函数,用于在任意DOM节点中查找...
- FF中的节点没有`removeNode`方法,需要使用`node.parentNode.removeChild(node)`来移除节点。 这些是JavaScript在跨浏览器兼容性上的一些基本问题和解决方案。为了确保代码在所有浏览器中都能正确执行,开发者...
7. 保存XML:最后,使用`XmlDocument`的`Save`方法将XML文档写入文件。 例如,一个简单的XML保存函数可能如下所示: ```csharp private void SaveTreeViewToXML(TreeView treeView, string filePath) { Xml...
在实际开发中,由于浏览器兼容性问题,`parentElement`和`children`是IE特有的属性,而在W3C标准中推荐使用`parentNode`和`childNodes`。不过,对于现代浏览器,这两个非标准属性通常也能正常工作,但在编写跨浏览器...
10. `parentElement`和`children`问题:FF使用`parentNode`和`childNodes`,而IE中可能有`parentElement`和`children`。`childNodes`在不同浏览器中的处理方式不同,可能包含空白文本节点。建议使用`...
10. **FF中的parentElement和parent.children**:FF使用`element.parentNode`和`element.childNodes`,而IE有`element.parentElement`和`element.children`。 11. **const问题**:在旧版本的IE中不支持`const`...
可以使用 `parentElement` 和 `parentNode` 属性来获取父级节点,例如: `let parent = div.parentElement;` 可以使用 `childNodes` 和 `children` 属性来获取子节点,例如: `let children = div.children;` ...
Firefox则使用`parentNode`和`parentNode.childNodes`,删除节点用`node.parentNode.removeChild(node)`。在编写跨浏览器的代码时,需要使用条件判断或库(如jQuery)来处理这些兼容性问题。 总之,理解并适配IE和...
10. **在FF中没有parentElement parement.children**:Firefox使用`parentNode`和`childNodes`属性,而IE提供了`parentElement`和`children`。在编写兼容代码时,需要同时处理这两种情况。 11. **const问题**:在旧...
在非IE浏览器中,通常使用`parentNode`属性来代替`parentElement`,因为`parentNode`是W3C标准推荐的属性。 然后,我们转向`offsetParent`属性,这是一个相对复杂的概念。`offsetParent`并不总是返回元素的直接父...
Firefox则使用`parentNode`、`parentNode.childNodes`和`node.parentNode.removeChild(node)`来实现相同的功能。 总的来说,理解并掌握不同浏览器间事件对象的差异,对于编写兼容性良好的JavaScript代码至关重要。...
parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 示例: “parentNode” 常用来...
10. FF中没有`parentElement`和`parement.children`:Firefox使用`parentNode`和`childNodes`,而非IE的`parentElement`和`children`。在跨浏览器代码中,使用`parentNode`和`childNodes`更安全。 11. `const`问题...
对于表格元素,可以使用上述DOM操作方法来实现动态添加或删除行等功能。例如,向表格中添加一行: ```javascript var table = document.getElementById('myTable'); var row = table.insertRow(0); var cell1 = row....
Firefox则使用`parentNode`,`parentNode.childNodes`,以及`node.parentNode.removeChild(node)`来实现相同的功能。 理解这些差异是编写跨浏览器JavaScript代码的基础,开发者需要根据实际情况选择适当的解决方案...
10. **FF中没有parentElement和parent.children**:Firefox不支持`parentElement`和`parent.children`,可以使用`parentNode`和`childNodes`代替。 11. **const问题**:IE8及更早版本不支持`const`关键字,如果要...