DOM操作精华：特效代码与常用函数实例

需积分: 9 173 浏览量更新于2024-10-31 收藏 3KB TXT 举报

"本文档提供了一个关于DOM操作常函数的精简示例和特效的网页代码演示。DOM（Document Object Model）是HTML和XML文档的标准接口，用于处理和操作网页中的元素。主要内容包括使用JavaScript实现的一些实用功能，如隐藏和显示元素（通过_id_进行定位）、修改元素样式（CSS属性）、获取和设置输入元素值、获取元素属性以及利用_after()和_after2()方法来寻找特定元素的后续兄弟节点。首先，HTML结构部分展示了如何使用`id`属性来标识页面上的元素，如`<div id="aa">...</div>`和`<a id="url">...</a>`，这些元素将作为DOM操作的对象。然后，文中提到的几个JavaScript函数如下： 1. `_hide('lwkyy')`和`_show('lwkyy')`：这两个函数用于控制具有指定`id`（如'lwkyy'）的元素的可见性，通过设置其`display`属性为`none`和`block`来实现隐藏和显示效果。 2. `_css('lwkyy')`：这个函数用于更改指定元素的CSS样式，如修改边框、填充等。它可能接收一个包含CSS属性和值的对象作为参数。 3. `_val(this)`和`_attr('url')`：这两个函数分别获取页面上带有特定`id`（如`vals`）的`input`元素的值（value属性）和`<a>`元素的`title`属性。 4. `_after('div')`和`_after2(aa)`：这两个方法用于查找具有指定`id`（如'lwkyy'或'aa'）的元素之后的第一个`div`元素。它们是自定义的DOM查找函数，可以用来在页面中进行更复杂的选择器操作。 5. `Element.extend()`和`document.getElementById()`：这是JavaScript中的DOM操作基础，前者扩展了`Element`对象使其能够处理更多DOM元素，后者则是通过`id`获取HTML元素的方法。整个文档的目的是为了让开发者更好地理解和掌握DOM操作的基本技巧，以便在实际开发中创建动态交互式的网页特效。通过学习和应用这些函数，开发者可以更灵活地控制网页内容，提升用户体验。同时，文档还提供了一个学习和实践的平台，适合初级到中级的前端开发者使用。最后，如果需要更多免费资源，可以访问提供的链接http://ynsky.download.csdn.net/获取更多相关的教程和代码示例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM操作常函数集合精简</title>
</head>
<body>
<div id="aa">这是在前面的，注意这两个after引用的不同点_after('div')、_after(aa)</div>
<a id="url" href="http://www.ask144.cn">国人理财</a>
<div id="lwkyy" style="border:1px solid red; padding:1em;">DOM操作常函数集合精简,作用人：lwkyy</div>
<input type="button" onclick="_hide('lwkyy')" value="隐藏ID为lwkyy的DIV" />
<input type="button" onclick="_show('lwkyy')" value="显示ID为lwkyy的DIV" />
<input type="button" onclick="_css('lwkyy')" value="设置ID为lwkyy的DIV的样式" />
<input type="button" id="vals" onclick="_val(this)" value="获取这个INPUT的value值" />
<input type="button" id="vals" onclick="_attr('url')" value="设置ID为url的A的title属性值" />
<input type="button" id="vals" onclick="_after('div')" value="在ID为lwkyy的DIV后面建一个DIV" />
<input type="button" id="vals" onclick="_after2(aa)" value="将ID为aa的DIV移动到最后面" />
<script language="javascript">
/**
* @author lwkyy,DEVIN,Groups
*/
Element={};
function $(e){if(e)return Element.extend(typeof(e)=='string'?document.getElementById(e):e);}
Element.extend=function(e){
if (e){
for (v in Element.Methods)
e[v] = Element.Methods[v];
return e;
}else{
return 'undefined';

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

YnSky

粉丝: 124
资源: 2852

DOM操作精华：特效代码与常用函数实例

京东分类js特效（代码精简，效率高）

gQuery : jQuery DOM 操作部分

MFC自制精简浏览器源代码，VC++源代码

zepto手机端日期时间选择特效代码

js鼠标移上去变化图片特效，精简算法版本.zip

jQuery手机端标签换一换特效代码

Animated Menu 动感菜单导航条js+css特效代码

轻量级Modal模态框插件cta.js特效代码

jQuery实现的精简UBB代码编辑器源码.zip

网络抽奖示例

最新资源