javascript+dom
全局函数:JS中提供部分的函数,不需要任何对象,可以直接通过函数名在代码使用。
URL:统一资源定位符
浏览器地址栏中输入的信息
http://www.itheima.com:80/index.jsp?name=zhangsan&password=123
URI:统一资源标识符
URI表示的资源数据不具体 index.jsp 称为一个URI
BOM:browser object model 浏览器对象模型,把当前的浏览器看成一个对象。
通过浏览器对象可以获取和浏览器相关的所有信息。
1.window对象:
是javascript层级中的顶层对象
Window对象有浏览器在加载到body或者frameset标签的时候由JS引擎自动创建。我们在JS代码中可以直接使用,使用window。
window对象中的属于:
专门获取window中包含的其他对象:
document 获取浏览器加载的html文件对象
history 获取浏览器中的历史记录对象
location 浏览器的地址栏对象
navigator 浏览器对象
screen 浏览器窗口在显示器屏幕上的相关对象
setInterval("函数名",毫秒值) 在指定的毫秒值之后重复执行当前指定的这个函数clearInterval()清除重复执行的动作setTimeout("函数名",毫秒值)在制定的毫秒值后只执行一次某个函数clearTimeout()清除指定的执行动作open() 打开一个新窗口close() 关闭打开的新窗口
2.history对象:
它是javascript对象,不是html dom对象
History对象是有javascript runtime engine 自动创建,由一系列的URL组成的,这些URL是浏览器口内已访问的URL。
唯一保持使用的功能只有back(),forward()和go()方法。
3.Location对象:
包含当前URL的信息
4.navigator对象:
可以访问系统,浏览器的信息。
DOM:Document Object Model 文档对象模型。
文档:html文件。但是后期也可能是xml文档
当浏览器把一个html文件加载到内存中,这时就会在内存中得到一个关于当前这个html文件的对象,这个对象就是DOM对象。DOM对象的标准:由W3C指定,它规定如何通过JS技术来解析当前加载的这个html文件中的所有标签,以及标签中的属性,还有标签中封装的文本数据。
当我们去解析一个html文件的时候,解析到的标签称为标签对象(元素节点)、标签上的属性称为属性对象(属性节点)、标签中的文本称为文本对象(文本节点)。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
- 对 HTML DOM 事件对出反应
- 如何添加或删除 HTML 元素
DOM获取元素(标签)节点:
getElementById(): 是根据页面上的标签的id属性值。获取当前某个标签对象当获取到一个html页面中的标签对象之后,当前这个标签对象的具体操作需要查阅DHTML文档getElementsByName() :根据页面上标签上的name属性的值,获取当前页面上的标签对象由于标签的name属性的值可能重复,因此获取到的一个数组getElementsByTagName():根据标签的名称获取标签对象,由于页面上会出现同名的标签,因此获取到一定也是一个数组
改变 HTML 输出流:
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
改变 HTML 内容:
ent.getElementById(id).innerHTML=new HTML
改变 HTML 属性:
document.getElementById(id).attribute=new value
改变 HTML 样式:
document.getElementById(id).style.property=new style
HTML DOM 事件
onclick=JavaScript
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
给页面上的标签绑定事件对应的函数的2种方式:
1、直接在页面上的标签上书写事件名称,然后给名称的属性值绑定JS函数名
2、在页面加载完成之后,通过js和dom技术获取到这个标签对象,然后动态给这个标签绑定事件
<script type="text/javascript">//直接在页面上的标签上绑定事件function _click(){var input = document.getElementById("username");if( input.value == "请输入用户名"){input.value="";}}//动态的给页面上的标签绑定事件//必须在页面架子完成之后绑定事件/*JS中的正则对象:JS中创建正则对象可以直接new,还可以使用/正则表达式/var reg = new RegExp("正则表达式");var reg2 = /正则表达式/;*/window.onload = function(){document.getElementById("username").onblur = function(){//在事件中可以使用this关键字,this表示的是当前发生事件的哪个标签对象var value = this.value;var reg = new RegExp("^\\w{6,12}$");if( reg.test(value) ){document.getElementById("nameSpan").innerHTML = "用户名正确".fontcolor("green");}else{document.getElementById("nameSpan").innerHTML = "用户错误".fontcolor("red");}} }
</script>
function demo(){//获取页面上的div标签对象var div = document.getElementById("div");//div.innerHTML = "添加数据";//使用dom技术动态先在内存中创建出一个文本对象var text = document.createTextNode("数据");//把文本标签对象条件到div中div.appendChild(text);}function demo2(){var div = document.getElementById("div");//div.innerHTML = "<a href='http://www.itheima.com'>黑马</a>";//创建a标签对象var a = document.createElement("a");//<a></a>a.innerHTML = "黑马"; //<a>黑马</a> //给a标签上添加属性a.setAttribute("href","http://www.itheima.com");//<a href='http://www.itheima.com'>黑马</a> div.appendChild(a);}
//删除页面上的id为two 的 divfunction demo(){var two = document.getElementById("two");//删除的时候必须获取当前标签的父标签,才能删除自己var body = two.parentNode;//删除当前div标签对象//获取 id为 one的div 使用兄弟标签获取var one = two.previousSibling;body.removeChild(one);}//替换function demo2(){//使用id为one的div替换id为two的divvar two = document.getElementById("two");var one = document.getElementById("one");//获取父标签var body = two.parentNode;body.replaceChild(one, two);}//克隆替换function demo3(){//使用id为one的div替换id为two的divvar two = document.getElementById("two");var one = document.getElementById("one");//获取父标签var body = two.parentNode;//克隆出id为one的div标签var cloneOne = one.cloneNode(true);body.replaceChild(cloneOne, two);}
JSON格式的数据表现形式:
第一种格式:
{
key:value,
key:value,
key:value
}
JSON格式中的数据的key必须是字符串。value值可以是任意类型的数据
第二种格式:
[
{ key:value , key:value },
{ key:value , key:value },
{ key:value , key:value }]
/*
json的第一种格式:
var json = {key:value,key:value}
可以根据指定的json对象,调用它的key,得到对应的value
调用的方式:
格式1:对象.key 获取到key对应的value
格式2:对象["key"] 获取到key对应的value
如果要遍历json个数的所有数据,需要使用循环for in循环====================================================Java中的foreach 遍历容器:for( 容器中的数据类型 变量名 : 容器名 ){变量空间中保持的是容器中的某个元素数据} ====================================================JS中的for in格式for( var 变量 in 数组|对象|json ){如果是数组的话,变量是数组的下标如果是json个数数据,变量是key值如果是对象,变量是对象中的某个属性或者方法名} var arr = [4,2,7,9,0,11];for( var i in arr){alert(arr[i]);}*/var json = {"name":"林青霞","age":26,"address":"东莞","sex":"不详","student":{"name":"风清扬","age":32,"address":"西安",}};//for in循环是用来遍历对象或json的for( var j in json ){document.write(j +":"+json[j]+"<br/>");for( var i in json[j] ){document.write(i +":"+json[j][i]+"<br/>");}}var json2 = [{"name":"黑马","age":"5"}];alert(json2[0].name);
注意:var j ; json.j;//这格式是错误的,j是变量,不能这样使用json.j访问该json的属性值。
转载于:https://www.cnblogs.com/beyondbycyx/p/4758861.html
javascript+dom相关推荐
- 六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录 六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
- javascript DOM 遍历
javascript DOM 遍历 由 愚人码头 撰写 http://www.css88.com/archives/514 javascript DOM 遍历 以下一系列的辅助函数可以帮助您,他们能取 ...
- javascript DOM(08-21)
1.createElement()和createTextNode() //创建一个li新元素 var newChild=document.createElement('li'); //创建一个a 新元 ...
- html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
- javascript dom追加内容的例子
javascript dom追加内容的例子 javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC & ...
- java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...
- Javascript——DOM编程
Javascript--DOM编程 基本概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...
最新文章
- 学数学,你要如何过题海:游泳?冲浪?划小船?开游艇?
- java学习之—实现一个简单的ArrayList
- 皮一皮:我是谁,我在哪里,我的爸爸是哪个?
- max 安装 mysql5.x_MySQL5.7安装
- Matlab | Matlab从入门到放弃(6)——数组
- Nacos-环境隔离
- 河南农业大学计算机试题,河南农业大学计算机vb考试必出
- Python-Django-入门
- 用C++实现随机分组
- 用计算机如何扫描仪,扫描仪的使用方法 扫描仪怎么用
- 编译Linux内核4.4实现可读NTFS
- dnmap分布式集群扫描
- 一个敷衍的开头。。。
- Java手机号码工具类(判断运营商、获取归属地)
- windows编程学习——1 关闭窗口不退出
- android开发-指纹识别
- 基于Spark的案例:同义词识别
- 世界气象日话“海洋气象”系列之——CMRC
- windows系统配置redis可通过IP访问(外部局域网可访问)
- 最新JAVA编程题全集(50题及答案)