博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
恶补web之七:html DOM知识
阅读量:5943 次
发布时间:2019-06-19

本文共 1503 字,大约阅读时间需要 5 分钟。

    html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准:

w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更新文档内容,结构和样式.

    dom标准被分为3个不同部分:

1.核心dom - 针对任何结构化文档的标准模型

2.xml dom - 针对xml文档的标准模型

3.html dom - 针对html文档的标准模型

    xml dom定义了xml元素对象和属性,以及访问它们的方法

    html dom定义了所有html元素的对象和属性,以及访问它们的方法,换言之,html dom是关于如何获取,修改,添加或删除html元素的标准.

    html dom中,所有事物都是节点,dom被视为节点树的html.根据w3c的dom标准,html文档中所有内容都是节点:

1.整个文档是一个文档节点

2.每个html元素是元素节点

3.html元素内的文本是文本节点

4.每个html属性是属性节点

5.注释是注释节点

    html dom将html文档视作树结构,这种结构被称为节点树,通过dom,树中所有节点均可通过js访问,所有节点元素均可被修改,也可创建或删除节点.

    节点树中的节点彼此拥有层级关系:父,子,同胞等:

1.节点树中,顶端节点称为根

2.每个节点有父节点,除了根

3.一个节点可拥有任意数量的子

4.同胞是拥有相同父节点的节点

    dom处理中常见错误是希望元素节点包含文本.

    方法是我们可以在节点(html元素)上执行的动作.以下是常用的dom对象方法:

    getElementById()方法返回带有指定id的元素

    appendChild(node) 插入新的子节点

    removeChild(node)删除子节点

    下面是常用的dom属性:

    innerHTML 节点的文本值

    parentNode 节点的父节点

    firstChild和lastChild 不用解释吧

    childNodes 节点的子节点

   attributes 节点的属性节点

    length属性定义节点列表中节点的数量

    getElementsByTagName 返回带有指定标签的所有元素:

var x = document.getElementsByTagName("p"); 选取文档中的所有<p>节点.可以通过下标访问这些节点比如访问第二个节点:item = x[1];

    getElementsByClassName 返回相同类名的所有html元素

    html dom允许你在事件发生时执行代码

    如果删除html元素,必须清楚该元素的父元素

    html dom允许用js向html元素分配事件:

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

以上代码将displayDate函数分配给了id为'id'的html元素的onclick回调.

    当用户进入或离开页面时,会触发onload和onunload事件;

    onchange事件可以用于输入字段的验证

    onmouseover和onmouseout可用于在鼠标指针移动到或离开元素时触发函数;

    onmousedown,onmouseup以及onclick事件是鼠标点击全部过程,鼠标按钮点击时触发onmousedown事件,当鼠标松开时触发onmouseup事件,最后当鼠标完成点击时,触发onclick事件.

    document.documentElement -  全部文档

    document.body - 文档主体

转载地址:http://lgzxx.baihongyu.com/

你可能感兴趣的文章
Linux Namespace系列(09):利用Namespace创建一个简单可用的容器
查看>>
oracle中create table with as和insert into with as语句
查看>>
kafka连接异常
查看>>
11g废弃的Hint - BYPASS_UJVC
查看>>
为什么工业控制系统需要安全防护?
查看>>
Mongodb部署记录[3]-主从搭建
查看>>
hive sql操作
查看>>
tomcat 深度优化
查看>>
127 - "Accordian" Patience
查看>>
阿里云CentOS7安装Oracle11GR2
查看>>
nginc+memcache
查看>>
php正则匹配utf-8编码的中文汉字
查看>>
MemCache在Windows环境下的搭建及启动
查看>>
linux下crontab实现定时服务详解
查看>>
Numpy中的random模块中的seed方法的作用
查看>>
用java数组模拟登录和注册功能
查看>>
javaScript实现归并排序
查看>>
关于jsb中js与c++的相互调用
查看>>
UVA 122 Trees on the level 二叉树 广搜
查看>>
POJ-2251 Dungeon Master
查看>>