添加javascript脚本:
如果要添加以下脚本到DOM文档页面中:
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
运用DOM节点操作的知识,我们可能会这样写:
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode('function sayHi(){alert("hi");}'));
document.body.appendChild(script);
上述代码在除IE外的浏览器都可以正确运行,但是,对于IE来讲,script元素是比较特别的,因此不允许访问它的子节点。
修改后的代码如下:
var script = document.createElement('script');
script.type = 'text/javascript';
var code = 'function sayHi(){alert("hi");}';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;//this works in all browers.
}
document.body.appendChild(script);
在文档添加css代码也有类似的情况:
<style type="text/css">
body {
background-color: red;
}
</style>
实现的代码应该如下:
var style = document.createElement('style');
style.type = 'text/css';
var cssText = "body{background-color:blue;}";
try{
style.appendChild(document.createTextNode(cssText));
} catch (ex){
style.styleSheet.cssText = cssText;//IE
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
整理自<<Professional.JavaScript.for.Web.Developers.2nd.Edition>>
分享到:
相关推荐
3.4.5 遍历和迭代DOM树 3.5 DOM HTML 3.5.1 DOM2 HTML 的HTMLDocument对象 3.5.2 DOM2 HTML 的HTMLElement对象 3.6 实例:将手工HTML代码转换为DOM代码 3.6.1 DOM生成工具的HTML文件 ...
在网页开发中,动态加载脚本和样式是提高性能和用户体验的重要策略。本章主要涵盖了三个关键知识点:元素位置的获取、动态脚本的加载以及动态样式的应用。 首先,让我们详细讨论一下元素位置的获取。在DOM(文档...
3. **属性和样式操作**:通过DOM,我们可以读写元素的属性,如`element.getAttribute()`和`element.setAttribute()`,以及设置CSS样式,如`element.style.property = value`。还可以通过`innerHTML`和`textContent`...
这里我们关注的是一个包含`jquery.DOMWindow`脚本的弹出层例子。`jQuery`是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。`DOMWindow`则是基于jQuery的一个插件,用于创建可定制的弹出...
JavaScript DOM API(Document Object Model)允许我们操作HTML和XML文档的结构、内容和样式。以下是一些基本的DOM操作: 1. 获取元素:`document.getElementById("id")`,`document.querySelector("CSS selector")...
3.4.5 遍历和迭代DOM树 3.5 DOM HTML 3.5.1 DOM2 HTML 的HTMLDocument对象 3.5.2 DOM2 HTML 的HTMLElement对象 3.6 实例:将手工HTML代码转换为DOM代码 3.6.1 DOM生成工具的HTML文件 ...
3.4.5 遍历和迭代DOM树 3.5 DOM HTML 3.5.1 DOM2 HTML 的HTMLDocument对象 3.5.2 DOM2 HTML 的HTMLElement对象 3.6 实例:将手工HTML代码转换为DOM代码 3.6.1 DOM生成工具的HTML文件 ...
使用`style="display:none"`可以使元素不显示在页面上,但仍然存在于DOM树中。这种方式常用于动态显示或隐藏某些内容。 ### 滚动脚本应用 1. **IFRAME标签**: ```html <IFRAME style="WIDTH:600px;HEIGHT:156...
DOM是文档对象模型(Document Object Model)的缩写,它是一种与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。简单来说,DOM是页面文档的一个树形结构的表示形式,每个节点代表了...
总的来说,这个“显示特殊节日脚本”利用了JavaScript的日期处理、DOM操作、事件监听和样式控制等功能,为网页创造出一种与特殊节日相关的互动体验。通过深入理解这些核心概念和技术,开发者可以创造出更加丰富和...
JavaScript,作为一种广泛应用于Web开发的脚本语言,与DOM(Document Object Model)的结合是创建交互式网页的关键。本文将深入探讨JavaScript编程艺术及其在DOM操作中的应用,并结合提供的源码进行详细解析。 首先...
DOM的核心理念是将网页作为一个可编程的对象集合,使得开发者可以使用脚本语言,如JavaScript,来动态地更新、添加、删除或修改文档内容。 DOM将HTML或XML文档视为一个树形结构,每个部分都对应着一个特定的节点。...
这些属性可以用来实现样式的改变、DOM操作等。 四、引入JS文件 在ASP.NET中,可以通过script标签引入JS文件,例如:<script src="script.js"></script>这可以将JS文件引入到HTML页面中。 五、点击按钮时相关栏位...
例如,`element.style.property = value`可以设置元素的样式属性,或者使用`getComputedStyle()`获取元素的实际计算样式。 五、动画效果 JavaScript可以通过定时器(setTimeout()和setInterval())实现动画效果。...
在这个项目中,你可能会遇到添加新元素、删除元素、遍历DOM树、以及响应用户交互等多种场景,这些都是DOM操作的基本技巧。通过实践,你可以更深入地理解这些概念,并掌握在实际项目中如何运用它们。 总结一下,这个...
DOM(Document Object Model)即文档对象模型,它是HTML或XML文档的一种树状结构表示,允许程序和脚本动态地访问和更新文档的内容、结构和样式。以下是一些关键的DOM对象及其属性和方法。 ##### 1. `document`对象 ...
JavaScript,简称为JS,是一种广泛应用于网页开发的脚本语言,它主要负责处理网页的交互性和动态效果。在网页设计中,JavaScript 起到了至关重要的作用,它能够与用户进行实时互动,提升用户体验。以下是一些常见的...
《VBScript JavaScript Dhtml SQL WSH DOM XML CSS参考手册大全》是IT领域的宝贵资源,它涵盖了Web开发中的多个核心技术,包括动态网页设计、脚本语言、数据库管理和网络通信。下面将详细阐述这些技术及其重要性。 ...
JavaScript DOM(文档对象模型)是Web开发中的一个重要概念,它是一种标准,允许程序和脚本动态更新、添加、删除和改变HTML或XML文档的内容、结构和样式。DOM将整个网页视为一个树形结构,其中每个节点代表页面上的...
在网页上添加水印,主要通过操纵DOM元素(Document Object Model)和CSS样式来实现。首先,创建一个包含水印文本的DOM元素,然后将其放置在页面的适当位置,并应用相应的透明度和角度等CSS属性,以达到水印效果。 ...