javascript资源-CSDN文库

需积分: 3 44 浏览量 2009-07-28 17:33:29 上传评论收藏 2KB TXT 举报

根据提供的文件信息，我们可以提取并总结出以下几个JavaScript相关的知识点： ### JavaScript DOM操作基础 #### 获取元素 1. **`getElementsByTagName` 方法**： - `document.getElementsByTagName("ul")`: 此方法返回文档中所有 `<ul>` 元素的集合。 - 示例代码中，通过 `var ul = document.getElementsByTagName("ul");` 获取所有 `<ul>` 元素。 2. **`getElementByTagName` 方法**： - `getElementByTagName` 方法返回带有指定标签名的第一个子节点。 - 示例中使用了 `getElementByTagName` 方法来获取指定 `<ul>` 元素下的 `<li>` 元素：`var ol2 = ul[1].getElementsByTagName("li");`。 - `alert(ol2.length + "" + ol2[0].tagName + "" + ol2[0].childNodes[0].nodeValue);` 这行代码输出了 `<li>` 元素的数量、标签名称以及第一个子节点的文本内容。 3. **`getElementById` 方法**： - `getElementById` 方法用于获取具有指定 ID 的单个元素。 - 示例中的注释提到了此方法的用法：`//document.getElementById("")` 可以用来获取具有特定 ID 的元素。 #### 检查子节点 4. **`hasChildNodes` 方法**： - `hasChildNodes` 方法用于检查一个节点是否包含子节点。 - 示例中通过 `if (ul.hasChildNodes()) { ... }` 来判断 `<ul>` 元素是否有子节点。 - 如果有子节点，则可以通过 `var och = ul.childNodes;` 获取所有子节点，并通过循环遍历这些子节点，输出每个子节点的 `nodeName` 属性值。 5. **`getAttribute` 方法**： - `getAttribute` 方法用于获取元素的属性值。 - 示例中的 `var img = document.getElementsByTagName("img")[0]; alert(img.getAttribute("title"));` 用于获取 `<img>` 元素的 `title` 属性值。 #### 创建与添加新元素 6. **`createElement` 和 `createTextNode` 方法**： - `createElement` 方法用于创建新的 HTML 元素。 - `createTextNode` 方法用于创建文本节点。 - 示例中的 `var op = document.createElement("p");` 创建了一个 `<p>` 元素。 - `var oText = document.createTextNode("这是一个新的段落"); op.appendChild(oText);` 创建了一个文本节点并将其附加到 `<p>` 元素中。 - 最后通过 `document.body.appendChild(op);` 将新创建的 `<p>` 元素添加到页面的 `<body>` 中。 #### 修改元素内容 7. **`innerHTML` 属性**： - `innerHTML` 属性可以用来获取或设置元素内部的 HTML 内容。 - 示例中的函数 `myDOMInnerHTML()` 通过 `var div = document.getElementById("mytext");` 获取了一个元素。 - 接着 `alert(div.innerHTML);` 输出该元素的当前 HTML 内容。 - 通过 `div.innerHTML = "<img src='01.jpg' title=''>";` 修改了元素的内容，将其替换为一个新的 `<img>` 元素。通过以上知识点的学习，我们可以更好地理解和掌握如何在JavaScript中操作DOM元素，这对于网页开发非常重要。这些方法可以帮助我们动态地修改网页内容，增加交互性和功能性。

资源推荐

资源详情

资源评论

// document.getElementsByTagName("ul");
// oli2[0].tagName 标记的名称
// oli2[0].childNodes[0].nodeValue 标记的所有子标记以及它们的值

var oul = document.getElementsByTagName("ul");
var oli2 = oul[1].getElementByTagName("li");
alert(oli2.length + " " + oli2[0].tagName + " " + oli2[0].childNodes[0].nodeValue);
// document.getElementByTagName(" ") 中参数为标记的名称：<a></a> 中的 a
// 而 document.getElementById("") 中的参数为：标记的 id 属性
-----------------------------------------------------------------------------------------------------------------------------
// oul.hasChildNodes() 是否有子标记？
// och[i].length
// och[0].nodeName

var oul = document.getElementById("mylist");
var DOMString = "";
if(oul.hasChildNodes())
{
var och = oli.childNodes;
for(var i=0;i<och[i].length;i++)
{
DOMString += och[i].nodeName + "\n";
}
alert(DOMString);
}
-----------------------------------------------------------------------------------------------------------------------------
// img.getAttribute("title");

var img = document.getElementsByTagName("img")[0];
alert(img.getAttribute("title")); 输出 “情人坡”

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈