JavaScript DOM操作

最新推荐文章于 2023-05-12 19:23:06 发布

Mr.syh

最新推荐文章于 2023-05-12 19:23:06 发布

阅读量149

点赞数 1

文章标签： js html

本文链接：https://blog.csdn.net/a5411000/article/details/90437676

版权

JavaScript DOM操作

DOM(文档对象模型) 是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树。

节点层次

<html>
	<head>
		<title>Hello</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

可以将这个简单的HTML文档标识为一个层次结构。文档节点是每个文档的根节点，
文档节点只有一个子节点，即<html>元素,我们称之为文档元素。

DOM操作技术

很多时候,DOM操作都比较简明, 因此用JavaScript生成哪些原本是用HTML代码生成的内容并不麻烦. 
不过,也有些时候,操作DOM并不像看起来那么简单, 由于浏览器中充斥着隐藏的陷阱和不兼容问题,
用JavaScript代码处理DOM 的某些部分要比处理其他部分更复杂一些。

动态脚本
使用< script >元素可以向页面插入JavaScript代码, 一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而动态脚本指的是页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本.
例如:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test.js';
document.body.appendChild(script);

//支持Firefox Safari Chrome Opera 不支持IE
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode('function sayHi() {alert('Hello');}'));
document.body.appendChild(script);

//支持IE Firefox Opera Safari 3
var script = document.createElement('script');
script.type = 'text/javascript';
var code = 'function sayHi() {alert('Hello');}';
try {
	script.appendChild(document.createTextNode(code);
} catch {
	script.text = code
}
document.body.appendChild(script);

动态样式
能够把CSS样式包含到HTML页面中的元素有两个, 其中,< link >元素用于包含来自外部的文件,而< style >元素用于指定嵌入的样式,与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式, 动态样式是在页面加载完成后动态添加到页面中的.
例如:

	var link = document.createElement('link');
	link.ref = 'stylesheet';
	link.type = 'text/css';
	link.href  = 'style.css';
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(link);

//支持Firefox Safari Chrome Opera 不支持IE
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode('body{background-color:red}'));
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);

var style = document.createElement('style');
style.type = 'text/css';
try{
	style.appendChild(document.createTextNode('body{background-color:red}'));
} catch {
	style.styleSheet.cssText = 'body{background-colr:red}';
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);

Mr.syh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM操作

JavaScript DOM操作DOM(文档对象模型) 是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树。节点层次<html> <head> <title>Hello</title> </head> <body> <p>Hello World!</p> &...
复制链接

扫一扫