HTML DOM学习

感觉表单对象很特殊

<html>
<head>
<title>Html DOM demo</title>
</head>
<body>
<form id="form1Id" name=‘form1Name‘>
    name:<input type="text" name="username" id="usernameId" />

</form>

<div name="mydivname" id="mydivid">hello</div>

<script type="text/javascript">
var fsForm1Id = document.form1Id;// document.getElementById("form1");
var fsForm1Name = document.form1Name;// document.getElementById("form1");

console.log("通过form-Id获取对象");
console.log(fsForm1Id);
console.log("\n");

console.log("通过form-name获取对象");
console.log(fsForm1Name);
console.log("\n");

console.log("在form中通过input-id获取input对象");
console.log(fsForm1Name.usernameId);
console.log("\n");

console.log("在form中通过input-name获取input对象");
console.log(fsForm1Name.username);
console.log("\n");

console.log(document.body);
console.log(document.body.mydivid);
console.log(document.body.mydivname);

</script>
</body>
</html>

效果图:

时间: 2024-10-29 03:51:12

HTML DOM学习的相关文章

HTML DOM 学习总结

DOM:核心DOM.XML DOM.HTML DOM 这里是对于HTML DOM学习的总结 --------------------------------------------------------------- 1.DOM介绍 DOM:Document Object Model,文档对象模型 如上图,元素.文本.属性三种节点作为叶子节点构成一颗树 通过可编程的对象模型,JS获得了足够的能力来创建动态的HTML,能改变页面中的所有HTML元素 各个节点之间存在着逻辑关系:parent.si

HTML DOM学习------简单介绍

DOM:w3c文档对象模型. 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. HTML DOM :定义了所有 HTML 元素的对象和属性,以及访问它们的方法. 换言之,HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. DOM节点:HTML文档中所有内容都是节点: 整个文档是一个文档节点: 每个HTML元素是一个元素节点: HTML元素内的文本是一个文本节点: 每个HTML属性是一个属性节点: 注释是注释节点: HTML DOM将HTM

javascript(js)基础之dom学习

dom学习 <img id='xx'.. onclick='aa()'> functon aa(){ xx1=document.getElementById("xx") //下面对xx1进行操作 } bom介绍:浏览器对象模型 因为浏览器企业太多,w3c定义了一个做浏览器的规范 规定 ----------- dom介绍/学习:文档对象模型 dom树 例子 <script language="JavaScript"> function text

JS加强学习-DOM学习01

JavaScript由三个部分组成:ECMAScript.DOM.BOM.前面已经学习了ECMAScript中的基础内容,现在可以开始学习DOM部分了,在DOM中更多的是实际效果的展现. 1. DOM定义 DOM:document object model 文档对象模型 它是将整个页面文档封装成了一个对象,并且这个文档对象由很多不同的节点组成. 节点包括三部分: 元素节点(标签节点).属性节点.文本节点. 2. 获取页面的方式 2.1 getElementById Id: document.ge

js的dom学习笔记一

前言: 我现在不好定位自己程序编写的技术的好坏,新手吧.DOM是实现js脚本连接上HTML文档的一个API,才接触jquery一两天,大概能明白,所谓的框架,就是在原生态的基础上做出的函数库,里面的方法.属性都是要使用该框架的对象来调用的.相比于jquery,DOM不是框架,虽然它们都能实现操控网页文档元素,DOM更加底层,dom的方法.属性直接面对文档元素来使用,而jquery要面向jquery对象来使用. DOM 是一个可以让javaScript脚本操控HTML元素.css属性的一套w3c标

DOM学习笔记三

通过节点层次关系获取节点:(重要) 当节点既没有id,也没有name,通过节点当中的关系,是另一种获取节点方式 <!-- 通过节点关系获取节点 关系: 1.父节点:parentNode,一个父节点 2.子节点:childNodes ,直接后代节点集合 3.兄弟节点:比较少用,因为没有浏览器的解析方式,顺序就不一样 上一个兄弟节点:previousSibing 下一个兄弟节点:nextSibing --> <script type="text/javascript"&g

JS加强学习-DOM学习03

7. 节点 7.1 节点的组成 .nodeType查看节点的类型(使用阿拉伯数字表示) .nodeName查看节点的名字 .nodeValue查看节点的值 节点分成:标签节点.属性节点.文本节点.注释节点.文档节点. 标签的节点: 标签的节点类型:  1 标签的节点名字: 对应的标签名字 标签的节点值 :  null 文本的节点: 文本的节点类型:  3 文本的节点名字: #text 文本节点值:   对应的文本值,如果没有,就是空 属性节点: 属性的节点类型:  2 属性的节点名称: 对应的属

JS加强学习-DOM学习总结

1. DOM复习 DOM:document object model  文档对象模型或文档树模型. 1.1 节点分类 DOM中一共有5个节点类型,而现在我们常用的有三种:标签(元素)节点,属性节点,文本节点. 我们可以通过nodeType获取节点的类型(一个数字),通过nodeName获得节点名,通过nodeValue获得节点的值. 1.2 获得页面元素的三种方式 document.getElementById:通过标签的id值获得元素. document.getElementsByTagNam

DOM学习控件定位和案例

Dom中有多种定位属性,下面是一个简单案例 1 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例--> 2 <head> 3 <title>document practise</title> 4 <script type="text/javascript"> 5 //document.onclick=function(){alert("点击网页了!");} 6 function

Dom学习笔记-(一)

一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点,每一个文档节点包含一个子节点-文档元素. 二.Node类型 DOM1定义了一个Node接口,其由所有节点的类型实现:在javascript中Node接口由Node类型实现(除IE). Javascript中的所有节点都继承Node类型,所以都共享一些基本的属性和方法. 1.nodeType:节点类型