javascript针对DOM的应用分析（三）

如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。
今天这章我们就讲这两个应用
（一）对html里现有的DOM元素进行操作。
我上面说了，对现有的DOM元素进行操作，无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。

一是直接在html文档里写入样式例如
<div style="width:300px;height:200px;background:#000;"></div>。

二是在html文档头部用样式标签插入例如
<style>
#dom{width:300px;height:200px;background:#000;}
</style>

三就是我们常用的链入方式例如
<link rel="stylesheet" type="text/css" href="css.css" />

这三种的用JS操作它样式的方法都不太相同
重点我们说第一种链入样式操作，因为是最常用的，也是最方便的。
第二种链入样式操作麻烦。
第三种链入样式操作麻烦不说，而且无法直接修改样式，想修改的话还必须用第一种的方法，也就是说只能看不能摸

第一种链入样式的操作方法
例<div id="dom" style="width:300px;height:200px;background:#000;margin-top:10px;"></div>
获取它的高度属性，首先当然是获取DOM元素了,用前几章的方法
var a = document.getElementById("dom");
再来获取它的高度属性，很简单
var h = a.style.height;
以此类推，获取宽度，获取背景色
var w = a.style.width;
var bg = a.style.background;
注意那个外边距属性是margin-top;
要获取这个不能直接写
var mt = a.style.margin-top;
要用JQ中提到的骆驼写法
var mt = a.style.marginTop;

获取它当然没什么用处，我们要能修改，修改起来也很方便。例如我们要把它的高度变为100，很简单,就一句
a.style.height = "100px";
其他的以此类推，我不再多说；

第二种链入样式的操作方法
<style>
#dom{width:300px;height:200px;background:#000;margin-top:10px;}
</style>
这种操作需要区分浏览器。因为IE和FF对这个获取的代码不同,比如获取高度的方法是
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var a = domcss[0].style.height;
修改的话是这样的
domcss[0].style.height = "100px";
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下；

第三种链入样式的操作方法
<link rel="stylesheet" type="text/css" href="css.css" />
这种操作也需要区分浏览器。
获取的话一般都是写个函数，函数是这样的
function CurrentStyle(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
假如我们那个css.css文件里面有height属性
获取方法是var a = CurrentStyle("dom").height;
无法用这里的方法直接修改，只能用第一种方法修改
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下；

（二）用JS动态创建DOM元素。
其实这个很简单就是几个JS的方法而已，不过要像盖房子一样一步一步来，比如我要创建一个这样的DOM元素：
<div id="dom" style="width:100px;height:100px;background:#000;margin-top:10px;"></div>

第一步，要创建一个div节点。var newobj = document.createElement("div");

第二步，要给这个节加一个id属性，并且属性名是dom。newobj.setAttribute("id","dom");

第三步，要给这个节点加属性了这里有两种方，一种就是我们前面说到的修改样式是这样的newobj.style.width = "100px";还有一种就是第二步用到的那个方法newobj.setAttribute("width","100px"),其他属性以此类推

第四步，就是要把这个节点给放到html文档里，方法是这样的document.body.appendChild(newobj)这句的意思是这样的。document.body就是获取了body元素
，appendChild(newobj)就是向这个body元素里添加一个孩子元素就是我们创建的那个节点。

如果你想移除这个节点是这样document.body.removeChild(newobj);
（这个可以换的，换成你想要向那个里面添加子元素的的那个元素，比如我想向id为con的这个元素添加节点我们就这样写document.getElementById("con").appendChild(newobj)）

这就算是完成了。JS里有很多和appendChild差不多的方法。用法和这个一样大家有兴趣的可以去百度一下。所以我这里也就不说了，都不太常用。

好这章就到这里了，下章开始就用开始教大家写一些效果了。

赞 (0)

相关推荐

  • JavaScript判断DOM何时加载完毕的技巧

    处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题.浏览器的渲染和操作顺序大致如下列表: HTML解析完毕 外部脚本和样式表加载完毕 脚本在文档内解析并执行 HTML DOM完全构造起来 图片和外部内容加载 网页完成加载 在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行.如前所述,这是个至关重要的问题,因为这两处执行的脚本并不能访问还不存在的DOM.幸好,我们还有若干的补救方法. 目前,最常用的级数是完全等待整

  • jquery 操作DOM案例代码分享

    jquery 操作DOM案例代码分享

    实例如下: 复制代码 代码如下: <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left;

  • javascript 基础篇4 window对象，DOM

    javascript 基础篇4 window对象，DOM

    他的属性也很丰富,因为我很懒,我就直接复制手册里的东西了: closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. dialogHeight 设置或获取模式对话框的高度. dialogLeft 设置或获取模式对话框的左坐标. dialogTop 设置或获取模式对话框的顶坐标. dialogWidth 设置或获取模式对话框的宽度. frameElement

  • javascript针对DOM的应用分析（四）

    下面我就写几个给大家看看 一,点击传参方法 复制代码 代码如下: <script> function tab(dom){ var list = document.getElementById("list").getElementsByTagName("li"); var con = document.getElementById("con").getElementsByTagName("div"); for(var

  • javascript针对DOM的应用分析（二）

    其实在原生的也JS也有这些属性.和JQ几乎相同但是比JQ少一些.但是用起来却比JQ麻烦一点.主要因为FF浏览器,因为FF会把你的换行也当做一个DOM元素.比如说 复制代码 代码如下: <div id = "dom"> <div></div> <div></div> </div> 我用原生的JS获取ID为dom的元素下的子元素.用我第一章说的方法就是var a = document.getElementById(&q

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • javascript针对DOM的应用实例（一）

    我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果.所以我这里只教大家最实际,最有用的javascript应用.但是前提大家最好有一些javascript或者jquery的编程的基础.好废话不多说了. 今天第一篇,就教大家如何用javascript获取页面中的dom元素.这个很重要.我会对照JQuery来讲. 如果页面中的元素是ID属性 <div id="dom"></div> JQ的方法:$("

  • javascript针对DOM的应用分析（五）

    其实这个应该不列入JS教程的范畴.应为FF,IE6以上浏览器都支持fixed这个固定属性.唯独IE6不支持.所以我为了可恶的IE6.我这里就出一篇教程吧.而且这种效果也可以锻炼同学们的计算能力.以后很多效果都需要你的计算能力.哈哈 固定居中.或者固定在任何地方思想几乎是一样的.只你要算法清楚了.效果写起来就轻而易举了.先贴代码 body,div{padding:0px;margin:0px;} #gd{width:100px;height:100px;background:#F00;color:

  • 什么是DOM(Document Object Model)文档对象模型

    D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关.语言无关的API,程序或脚本通过其动态访问.修改文档的内容.样式.结构. DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓"一次编写到处运行"的目标. 文档对象模型(Document Object Model,DOM)是一种用

  • javascript针对DOM的应用分析（三）

    如果这个DOM元素没有样式也就谈不上操作了.2.我们也可以直接用JS动态的向html里写入DOM元素. 今天这章我们就讲这两个应用 (一)对html里现有的DOM元素进行操作. 我上面说了,对现有的DOM元素进行操作,无非就是对样式的操作.所以我们首先就要能获取这个DOM元素的样式.在讲获取DOM元素的样式之前.先要说下DOM元素的样式链接方式.有三种. 一是直接在html文档里写入样式例如 <div style="width:300px;height:200px;background:#

  • JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作.分享给大家供大家参考,具体如下: 一.DOM概念 1. "D":Docment,指的是文档 2. "O":Object,指的是对象,在javascript有三种对象:用户定义对象.内建对象(JavaScript语言对象.如Math,Array).宿主对象(浏览器对象) 3. "M":Model,值得是Model,某种事物的表现形式 二.节点 1. 元素节点 :<body> <

  • javascript将DOM节点添加到文档的方法实例分析

    javascript将DOM节点添加到文档的方法实例分析

    本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • javascript基于DOM实现权限选择实例分析

    本文实例讲述了javascript基于DOM实现权限选择的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>权限选择</title> &

  • JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

    本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>

  • JavaScript针对网页节点的增删改查用法实例

    JavaScript针对网页节点的增删改查用法实例

    本文实例讲述了JavaScript针对网页节点的增删改查用法.分享给大家供大家参考.具体分析如下: 一.基本概念 这部分也就是所谓的"HTML DOM",所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式. 也就是所有网页都必须按照:<html><body></body></html>--的规则编写,也按照这样的规则加载. 所谓的"网页节点",也叫"DOM节点"的通俗

随机推荐