您现在的位置是:首页 > 文章详情

HTML DOM详细知识

日期:2018-06-18点击:483

1:节点

    HTML DOM中,所有的事物都是节点。

    整个文档是一个文档节点;

    每个HTML元素是一个元素节点;

    每个元素内的文本是一个文本节点;

    每个属性是一个属性节点;

    每个注释是一个注释节点;

2:方法

    首先理解“编程接口”的概念:我们可以通过编程语言(如javaScript)对HTML DOM进行访问,这里把HTML元素视为对象,编程接口就是对象的方法和属性。通过方法和属性来对对象进行操作。

    HTML DOM方法是可以在节点上执行的动作。

    常用的HTML DOM方法:

        getElementById(id):获取带有指定id的节点(元素);

        getElementsByTagName(tagName):获取包含指定标签名称的所有元素的节点列表(集合、数组);

        getElementsByClassName(className):获取包含指定类名的所有元素的节点列表(集合、数组);

        appendChild(node):插入新的子节点;

        removeChild(node):删除子节点;

        点击查看更多

3:属性

    HTML DOM属性是节点上能够获取或设置的值。

    innerHTML属性:获取元素内容,对于获取或替换HTML元素的内容很有用。

    nodeName属性:规定节点的名称。它是只读的。元素节点的nodeName与标签名相同,属性节点的nodeName与属性名相同,文本节点的nodeName为#text,文档节点的nodeName为#document。

    nodeValue属性:规定节点的值。元素节点的nodeValue为undefined或者null,文本节点的nodeValue为文本内容,属性节点的nodeValue为属性值。

    nodeType属性:返回节点的类型,是只读的。元素节点的nodeType为1,属性节点的nodeType为2,文本节点的nodeType为3,注释节点的nodeType为8,文档节点的nodeType为9。

4:访问

    访问节点也就是查找HTML的元素。

    对HTML DOM节点的访问主要通过上文所说的方法来进行。

5:修改

    修改HTML DOM意味着很多方面的内容,如:

        该表HTML内容、改变CSS样式、改变HTML属性、创建新的HTML元素等等。

    创建HTML内容:最简单的方式是使用innerHTML属性。如:

document.getEmlemntById("p1").innerHTML="新文本";

    改变HMTL样式:如:

 
document.getElementById("p1").style.color="red";
document.getElementById("p1").style.fontSize="larger";

    创建新的HTML元素:需要先创建新节点,然后把它追加到已有的元素节点上。如:

 
var para = document.creatElement("p");
var node = document.creatTextNode("这是一个新段落");
para.appendChild(node);
document.getElementById("div1").appendChild(para);

6:事件

    HTML DOM允许JavaScript对HTML事件做出反应。当事件发生时,可以执行JavaScript。比如用户点击某个元素时执行代码。

    事件属性:使用事件属性来向元素分配事件。如:

<button onclick="displayDate()">点我</button>    //向botton属性分配了onclick事件。

    使用HTML DOM来分配事件:如:

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

    onload和onunload事件:当用户进入和离开页面时,会触发onload和onunload事件。它们可用于检查浏览器类型、处理cookies。

    onchange时间:常用于输入字段的验证。当焦点离开时会触发。如:

<input type="text" id="fname" onchange="upperCase()">

    onmouseover和onmouseout事件:当鼠标指针移动到或离开元素时会触发。

  onmousedowm、onmouseup及onclick事件:他们是一次鼠标点击的全部过程。当鼠标按钮被点击时,出发onmousedown,鼠标按钮松开时,触发nomouseup,最后鼠标点击完成,触发onclick。也就意味着,需要定义一次点击事件时,可以直接使用onclick。当需要点击和松开事件时,需要另外两个。

    7:导航

    在HTML DOM中通过节点关系来进行导航。

    节点列表:节点列表是一个节点数组,通过下标可以访问相应的节点。与数组相似,通过length属性可以返回数组长度(节点个数)。

    节点关系:可以使用三个节点属性,分别是:parentNode、firstChild及lastChild。

    根属性:document.documentElement:全部文档;    document.body:文档的主体。

    childNodes和nodeValue:除了使用innerHTML,还可以使用childNodes和nodeValue属性来获取元素内容。如:

txt = document.getElementById("intro").childNodes[0].nodeValue;    //获取id为intro的元素的第一个子元素的值
原文发布时间:2018-6-19
原文作者:WARGON
本文来源 CSDN博客如需转载请紧急联系作者
原文链接:https://yq.aliyun.com/articles/610556
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章