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元素节点的内容：
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); alert(oDiv.tagName); }</script></head><body> <div id = "div1"><p>早安打工人</p></div></body>
运行结果如下：
如果我们要给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的样式，比如我们要
获取它的宽：
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" 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>
运行结果如下：
如果我们要修改宽度：
<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
赞 (0)

相关推荐

  • JavaScript DOM三种创建元素的方式

    三种创建元素的方式: document.write() element.innerHTML document.createElement() 初始HTML内容: <button>btn&l ...

  • DOM - 创建带文本的元素节点

      元素节点操作的方法  DOM不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点 我们分别来看一下: 1.write  //我们常用的document.write(); 例如 ...

  • DOM - 元素节点属性及Attribute

      元素节点属性  我们继续来看元素节点属性 ownerDocument 属性  功能:返回该节点的文档对象根节点.相当于document 一般就直接用document了,这个用的很少 我们来了解证实 ...

  • DOM - 元素节点属性

      元素节点属性  childNodes和firstChild和lastChild 1.childNodes  //获取当前元素节点的所有的子节点 举个小例子: 运行结果返回了一个节点列表: 节点列表 ...

  • Vue.js 获得兄弟元素，子元素，父元素（DOM操作）

    e.target 是你当前点击的元素 e.currentTarget 是你绑定事件的元素 e.currentTarget.previousElementSibling.innerHTML 获得点击元素 ...

  • HTML DOM 元素对象大全

    整理一分HTML DOM 元素对象大全,也叫javascript元素对象大全以备常用: Anchor 对象Anchor 对象表示HTML 超链接 Area 对象Area 对象代表图像映射的一个区域(图 ...

  • HTML DOM 元素对象在实际中的应用

    在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML 属性都是属性节点插入到 HTM ...

  • HTML DOM 元素对象

    HTML DOM 节点在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML 属性都是 ...

  • HTML DOM 元素对象总结

    在 HTML DOM 中, 元素对象代表着一个 HTML 元素.元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点.NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集 ...