DOM学习

我们只有通过DOM节点,才能对HTML文档进行操作性访问,而且注意:所有 HTML 元素被定义为对象。所有JS操作都要基于DOM节点,获取操作对象。

对HTML的DOM操作都是在JS中执行的

我们可以通过HTML的对象document去直接调用DOM方法,也可以用HTML的节点对象去调用DOM的方法。

操作:可以对HTML元素和内容  或  CSS样式  或  事件  进行增删改查

HTML文档中所有内容都是节点DOM,所以访问 HTML 元素等同于访问节点

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

我们只按父子关系分析HTML文档

例如:HTML中有两个子节点  <head>和<body>,,,,在body里面的节点则属于body的子节点,head同理,也就是说,文本中只含有父子关系。

我们JS要执行的方法等都是通过DOM节点找到处理的

所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

方法是您能够执行的动作(比如添加或修改元素)。

属性是您能够获取或设置的值(比如节点的名称或内容)。

访问方式:一定要注意到此处

我们要注意到一点,就是不管是CSS还是HTML文档,都有三个名字(tagName、id、className),我们通过这三个名字都可以访问到对象,只是访问方式不一样罢了。。。所以我们定义每一个CSS或者HTML节点都要给个标示(id、class或者本身标签名字)

DOM事件:

当用户点击鼠标时

当网页已加载时

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户触发按键时

注意几点:

1、getElementsByTagName() 方法返回节点列表。节点列表是一个从0开始的节点数组。

2、在文档中我们可以获取 第一个 或者是 最后一个 节点


document.write(document.cookie);//返回文档中的所有cookies的名称/值对

document.write(document.domain);//返回加载的文档的服务器域名

document.write(document.lastModified);//返回文档的最后一次修改时间

document.write(document.referrer);//返回加载的当前文档的URL

打开输出流,向流中输入文本

function createDoc(){

var doc=document.open("text/html","replace");

var txt="学习 HTML DOM 很有趣!";

doc.write(txt);

doc.close();

}

所有DOM功能:http://www.runoob.com/htmldom/htmldom-examples.html


前端开发的几个对象:JavaScript对象、Browser对象、HTML对象

详情见:http://www.runoob.com/jsref/dom-obj-search.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、概述 document节点是整个文档树的顶层节点,每张网页都有自己的document节点。window.doc...
    周花花啊阅读 5,170评论 0 1
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,780评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,257评论 0 5
  • 昨晚跟李酸奶聊了很多,从未来到现在 虽然对未来依然迷茫但是明白不能划水了 希望我能跟李酸奶一直相互督促共同进步 今...
    cix阅读 1,099评论 0 0
  • 前进的道路真的是一条孤燥而寂寞的路 怀着熬过去了就会柳暗花明的心 药理老师戏说,大学生峰会,不用看场地分布单看人群...
    華孜阅读 1,823评论 0 2

友情链接更多精彩内容