HTML DOM详细知识

news/2024/7/3 13:51:18

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博客如需转载请紧急联系作者

http://www.niftyadmin.cn/n/4388305.html

相关文章

PCI简介(二)

2019独角兽企业重金招聘Python工程师标准>>> 1.x86处理器系统地址空间简介 1.1 CPU地址空间 CPU地址空间是指CPU所能寻址的空间大小&#xff0c;比如对于32位CPU来说&#xff0c;其所能寻址的空间大小为0~4G。这是由CPU自身的地址总线数目决定的。这段空间也被称作C…

数组总结,持续更新~

数组的基础方法&#xff0c;就不一一介绍了&#xff0c;这里会介绍一些常用的ES6的一些常用方法&#xff0c; 在这之前&#xff0c;先说一些数组的常见问题。 1 数组的构建 数组的普通调用&#xff0c;等于构造调用。 下面的3种方式&#xff0c;都是一样的。 let arr Array(1,…

小程序中form 表单提交和取值方法

我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bind…

java dateformat 24_java – (简单)DateFormat,允许24:00:00和00:00:00作为输入

值24:00未在LocalTime中表示,因为它严格地是第二天的一部分.考虑到24:00可以表示为LocalTime的一部分的模型,但结论是它在很多用例中会非常混乱,并且会产生比它解决的更多错误.但是在java.time中支持24:00.完全可以使用标准格式化技术对其进行解析,但是必须使用SMART或LENIENT模…

python使用yaml库读取和写入数据

import yamltest.yml文件数据&#xff1a;yaml_path r"D:\PycharmProjects\2020study\BBBstudy\test.yml" with open(yaml_path, r) as f:cfg f.read()print(cfg)# 此时读出来的数据是字符串print(type(cfg))# 用yaml.load方法转字典d yaml.load(cfg)print(d)prin…

lambda函数复习

def test(x):return x*x # 这里我们用lambda定义一个匿名的内联函数。请注意&#xff0c;该函数没有名称。test 是保存创建的lambda函数的变量的名称 # 上面的函数和下面的lambda函数是一样的 test_f lambda x: x*x print(test(3)) print(test_f(3)) # 常量函数 def constant(…

java serializable用法_java基础----gt;Serializable的使用

Serializable序列化的简要说明一、 持久化的简单介绍&#xff1a;“持久化”意味着对象的“生存时间”并不取决于程序是否正在执行——它存在或“生存”于程序的每一次调用之间。通过序列化一个对象&#xff0c;将其写入磁盘&#xff0c;以后在程序再次调用时重新恢复那个对象&…

html5-4 HTML5超链接、URL地址和表格

html5-4 HTML5超链接、URL地址和表格 一、总结 一句话总结&#xff1a; 1、cellspace有什么用&#xff1f; 清除表格的单元格间距 26 <table border1px cellspacing0px width100%> 2、页面中的字体一般用什么好&#xff0c;怎么设置&#xff1f; 微软雅黑&#xff0c…