JavaScript如何操作DOM-创新互联

这篇文章运用简单易懂的例子给大家介绍JavaScript如何操作DOM,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

10多年的灵山网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整灵山建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“灵山网站设计”,“灵山网站推广”以来,每个客户项目都认真落实执行。

JavaScript如何操作DOM

在了解DOM之前,我们先来看一下window对象

Window对象保存着浏览器的信息,可以说是“浏览器本身”吧。

这么说可能有点难以理解,我们来实际看看对象的内容吧。

在基本的HTML文件的基础上,用console.log调用Window对象。

代码如下



  
    
    JavaScript
  
  
    
  

运行效果如下

JavaScript如何操作DOM

将指向window的三角形打开,结果如下

JavaScript如何操作DOM

通过这种方式,Window对象的所有属性和方法都出现了。

简单的属性包括以下的内容

JavaScript如何操作DOM

outerHeight →浏览器高度属性

outerWidth  →浏览器宽度属性

screenX  →表示浏览器左上角X坐标的属性

screenY  →表示浏览器左上角Y坐标的属性

另外,如果打开location属性,在location属性具有的对象中,有对此选项卡当前访问位置的显示。

JavaScript如何操作DOM

例如,href属性包含此选项卡正在访问的网页的URL。

通过这种方式,Window对象存储当前打开的选项卡具有的所有信息。

接下来我们再来看看document对象

document属性是此Window对象的一个非常重要的属性。此外,有document属性的是document对象。

所谓的document对象是保存在HTML中所表现的内容的对象。

简单地说,Window对象是浏览器本身,而document对象是正在访问的Web站点的本身。

当你向内看时,有各种各样的属性。例如,body表示HTML body标记的内容。

某些属性不会出现在HTML中,但它们也会分散在文档对象中。

最后我回到DOM,顾名思义,文档对象模型(DOM)允许你通过文档对象获取和操作各个元素。

实际上,我们可以进行基本操作,例如获取,删除和添加网站的各个元素。

下面我们就来看看DOM树结构

让我们看看如何操作DOM。

在个别的操作方法之前,我们先看一下“树结构”的DOM的结构。

在将HTML转换为docuent对象时,Window对象以树结构的形式保存信息。

总之,就是父元素下有多个子元素,子元素作为父元素下又有多个子元素.......

在基本HTML文件中利用

标签添加了一些元素。

代码如下



  
    
    JavaScript
  
  
    

标题

元素1

元素2

运行结果如下

JavaScript如何操作DOM

在查看器(element)中可以很容易看到HTML转换为了DOM。

在父元素下,你可以很清楚的看到两个元素和,

然后,将和作为父元素,下面有< meta > < title >元素,有< h2 > < p > < script >要素作为子要素并行存在着。

JavaScript如何操作DOM

这样,每个子元素都会成为父元素,也拥有了子元素......这就进一步的形成了一个嵌套结构。

最后,我们就来详细看看JavaScript中如何操作DOM

获取元素的方法:getElementById(id);

首先,获取元素有一个名为getElementById(id)的便捷方法;

基于给予元素的id(ById),我们得到一个具有该id(get)的元素。

我们来看具体的代码示例:

这样就会取得id为title的h2的元素

运行结果如下

JavaScript如何操作DOM

元素内文本的取得和改变:textContent属性

如果只想获取h2中的字符串“标题”,那么可以使用textContent属性。

代码如下

运行结果如下

JavaScript如何操作DOM

通过这种方式,你就可以看到仅获取了文本部分的“标题”。

还可以使用textContent属性改变文本的内容。

代码如下

运行结果如下

JavaScript如何操作DOM

创建元素的方法:createElement(tag_type);和createTextNode(text);

元素具有h2和p等标签类型。它也被指定为字符串。

此外,如果要使该元素具有文本,可以使用createTextNode(text)创建它;

已经有了“元素1”和“元素2”的p标签,再创建一个有“元素3”的文字的p标签吧。

首先,我们这样写



  
    
    JavaScript
  
  
    

标题

元素1

元素2

运行效果如下

JavaScript如何操作DOM

但是你却没有看到增加的元素3,这是因为还没有指定p标签和文本“元素3”属于哪个父元素,所以为了显示“元素3”,我们需要将其中一个现有元素指定为父元素,并将其添加为子元素。

所以,下面我们就来看看添加元素的方法:appendChild(element);

在制作中,新制作了具有“要素3”的文字的p要素。但是,因为只是做了,所以还在树结构中还没有被组合的状态。当然,不能在浏览器上显示。因此,必须把拥有“要素3”这个文本的p要素作为作为父母要素的子要素追加。

为了在特定的父母要素下追加子元素的方法是苹果。

(一个要素(elemen)作为孩子(Chil)追加(苹果)!很容易理解。

指定父母,把制作了的p要素作为孩子要素进行追加。

这次,因为想与已经某个p要素(要素1、要素2)并行排列,所以将BOdy标签指定为父母。

我们新创建了一个带有文本“元素3”的p元素。但是,因为它只是创建了,所以还在树结构中但处于没有被组合的状态,因此不能在浏览器上显示。所以我们需要添加带有文本“元素3”的p元素作为某个父元素的子元素。

在特定的父元素下添加子元素的方法是appendChild(element);

下面将指定父元素并尝试将创建的p元素添加为子元素。

在这种情况下,由于我们想要并行排列已存在的p标签(元素1,元素2),我们将body标记指定为父元素。

代码如下



  
    
    JavaScript
  
  
    

标题

元素1

元素2

运行结果如下

JavaScript如何操作DOM

关于JavaScript如何操作DOM就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站栏目:JavaScript如何操作DOM-创新互联
网站URL:http://myzitong.com/article/dsgeoh.html