DOM – 初识与ById元素

DOM对象是什么?

DOM对象，它其实就是document对象

document object model 简单地说就是文档对象模型

注意：”W3C文档对象模型(DOM)是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式”

html和css 他们组成了我们看到的页面的内容

JavaScript 它们是组成了我们网页上的交互，页面行为的操作

如果我们想要通过JavaScript来对html和css进行一些数据的操作，我们就需要DOM来将这两块打通

即：DOM是打通html和css壁垒的一个工具

具体是如何打通的，我们稍后去看

DOM中的三个字母我们来分开了解一下：

D：文档，理解为整个Web加载的网页文档;

O：对象，理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象;

M：模型，理解为网页文档的树型结构

什么是树型结构，我们都知道html标签都有不同的结构，通过缩进分级

DOM的分类

例如：我们body中有一个div

<body> <div title=”属性节点”>测试Div</div></body>

DOM 中的节点一共有三类

【注】在JavaScript中，所有的节点都是对象

<divtitle = "属性节点">测试Div</div>

元素节点 <div></div>

属性节点 title = "属性节点"

文本节点 测试Div

DOM元素节点获取的方法

我们要去对节点中的属性和方法进行操作，首先就是要先找到这个节点

document.getElementById( id );

功能：通过当前元素节点的id来获取对应的元素节点，由于id是唯一的，所以它只能获取一个元素

<head> <metacharset="utf-8"> <title></title> <script> var oDiv =document.getElementById("div1"); alert(oDiv);</script></head><body> <div id = "div1"></div></body>

返回结果为null

原因我们也讲过，因为代码是自上而下运行的，当我们获取节点的时候，下面body中的节点还没有去运行

有两种方法：

第一种是将script标签写在div标签的下面

第二种方法是添加window.onload函数，它是在页面加载以后执行的函数

我们来看一下第二种方法：

<head> <metacharset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); alert(oDiv); }</script></head><body> <div id = "div1"></div></body>

运行结果如下：

这样就可以获取到元素节点的内容了

获取到元素节点对象后，我们可以去访问元素节点中的属性

元素节点属性

包括两个：

先来获取tagName节点标签名的属性：

<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); alert(oDiv.tagName); }</script></head><body> <div id = "div1"></div></body>

运行结果如下：

再来获取innerHTML元素节点的内容：

运行结果如下：

如果我们要给innerHTML赋值的话，它会直接把效果反馈在网页上

<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" }</script></head><body> <div id = "div1"><p>早安打工人</p></div></body>

运行结果为：

以上是关于元素节点的两个属性

HTML属性

包括：

document.getElementById( “box” ).id; //获取id

document.getElementById( “box” ).id=”person”; //设置id

document.getElementById( “box” ).title; //获取title

document.getElementById( “box” ).title=”标题”; //设置title

document.getElementById( “box” ).style; //获取CSSstyleDeclaration对象

document.getElementById( “box” ).sytle.color; //获取style对象中的color的值

document.getElementById( “box” ).style.color=”red”; //设置style对象中color的值

document.getElementById( “box” ).className; //获取class类

document.getElementById( “box” ).className=”box”; //设置class类

alert( document.getElementById( “box” ).bbb ); //获取自定义属性的值，不支持

比如我们拿上面的例子来说：

<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" alert(oDiv.id); alert(oDiv.title); alert(oDiv.className); //以上是获取 document.getElementById("div1").className="aaa"; //这是修改class名 }</script></head><body>

                          <div  id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div>

</body>

运行结果如下：

最后我们来看一下style的样式，比如我们要

获取它的宽：

                          <div  id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div>

</body>

运行结果如下：

如果我们要修改宽度：

<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" oDiv.style.width = "666px";//修改div的宽度 alert(oDiv.style.width); //获取div的宽度 }</script></head><body>

                          <div  id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div>

</body>

运行结果如下：

注意：

如果我们要访问style中带 – 的样式，比如：

background – color;

我们要把 – 去掉，然后将color的首字母c大写C

backgroundColor;

例如：

<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" alert(oDiv.style.backgroundColor); //获取背景颜色 }</script></head><body>

                          <div  id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div>

</body>

运行结果如下：

同样在设置的时候也要首字母大写：

<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" oDiv.style.backgroundColor="yellow"; //设置背景色 alert(oDiv.style.backgroundColor); } </script></head><body>

    <div  id = "div1" title="hello" class="box" style="width:300px; height: 300px; background-color: red;"><p>早安打工人</p></div>

</body>

运行结果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。