HTML DOM

作者: DecadeHeart | 来源:发表于2017-03-01 20:31 被阅读6次

DOM是W3C标准,定义了访问HTML和XML的标准
根据W3C标准,HTML文档中的所有内容都是节点

1.编程接口

可以通过JS对之进行访问

innerHTML属性

var txt=document.getElementById("intro").innerHTML;

获取 id="intro" 的 <p> 元素的 innerHTML:

2.nodeName属性

3.nodeVlue属性

属性规定节点的值

x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);

3.nodeType属性

返回节点类型
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

4.访问方法

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

5.创建HTML内容

eg:

document.getElementById("p1").innerHTML="New text!";
document.getElementById("p2").style.color="blue";

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

6.元素

创建新的 HTML 元素 - appendChild()向最后子元素添加
创建新的 HTML 元素 - insertBefore()向最前父元素添加
删除已有的元素

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

替换已有元素

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);

7.事件

对事件做出反应

onclick="this.innerHTML='hello!'

使用事件属性

<button onclick="displayDate()">试一试</button>

分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

相关文章

  • HTML DOM

    HTML DOM 一、HTML DOM 节点 1.HTML DOM 节点 根据 W3C 的 HTML DOM 标准...

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • HTML DOM结构

    HTML DOM 定义了访问和操作 HTML 文档的标准。 什么是 HTML DOM? HTML DOM 是: H...

  • HTML DOM

    一,DOM 简介 通过 HTML DOM,可访问 javascript HTML 文档的所有元素 HTML DOM...

  • DOM树

    1.HTML DOM HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达...

  • Javascript第五章window对象的事件常用方法第三课

    更多免费教学文章 请关注这里 HTML DOM Element 对象HTML DOM 节点在 HTML DOM (...

  • JavaScript HTML DOM

    JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有...

  • 专辑篇:JS HTML DOM

    JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...

  • DOM轻松学习之旅(一)

    DOM简述 DOM 的作用 === 表示 HTML 文档 DOM 提供的 API === 查询,修改 HTML 文...

  • DOM简介

    通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 ** HTML DOM (文档对...

网友评论

    本文标题:HTML DOM

    本文链接:https://www.haomeiwen.com/subject/ifycgttx.html