js-DOM总结

原创 2016年05月30日 21:10:16
DOM的官方定义:DOM可以使脚本,动态的访问或操作,网页的内容、网页外观、网页结构。
DOM的分类
l    核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法。
l    HTML DOM(元素对象):针对HTML文档提供的专用的属性方法。
l    XML DOM:针对XML文档提供的专用的属性和方法。(就业班讲)
l    CSS DOM:提供了操作CSS的属性和方法。
            Event DOM:事件对象模型。如:onclick、 onload等
  每个html标记对象的属性可以分为三大类:核心DOM的属性和方法,元素对象的属性和方法,html标记本身的属性
1、核心DOM 节点访问
nodeName:节点名称。
nodeValue:节点的值。只有文本节点才有值,元素节点没有值。nodeValue的值只能是“纯文本”,不能含有任何的HTML标记或CSS属性。
firstChild:第1个子节点。
lastChild:最后1个子节点。
childNodes:子节点列表,是一个数组。
parentNode:父节点。
2、对节点的属性操作
l    setAttribute(name,value):给某个节点添加一个属性。
l    getAttribute(name):获取某个节点属性的值。
            removeAttribute(name):删除某个节点的属性
3、节点的创建
l    document.createElement(tagName):创建一个指定的HTML标记,一个节点
u    tagName:是指不带尖括号的HTML标记名称。
u    举例:var imgObj = document.createElement(“img”)
l    parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下。
u    parentNode代表父节点,父节点必须存在。
u    childNode代表子节点。
u    举例:document.body.appendChild(imgObj)
l    parentNode.removeChild(childNode):删除某个父节点下的子节点。
u    parentNode代表父节点。
u    childNode代表要删除的子节点。
举例:document.body.removeChild(imgObj)

1.核心DOM中,提供的属性和方法,已经可以操作网页了。为什么还要有HTMLDOM呢?
如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分麻烦。
那么,HTMLDOM中就提供了通过id直接找节点的方法,而不用再HTML根节点开始。
HTML DOM访问HTML元素的方法(最常用)
1、getElementById()
l    功能:查找网页中指定id的元素对象。
l    语法:var obj = document.getElementById(id)
l    参数:id是指网页中标记的id属性的值。
l    返回值:返回一个元素对象。
l    举例:var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
l    功能:查找指定的HTML标记,返回一个数组。
l    语法:var arrObj = parentNode.getElementsByTagName(tagName)
l    参数:tagName是要查找的标记名称,不带尖括号。
l    返回值:返回一个数组。如果只有一个节点,也返回一个数组。
l    举例:var arrObj = ulObj.getElementsByTagName(“li”)
元素对象的属性
l    tagName:标签名称,与核心DOM中nodeName一样。
l    className:CSS类的样式。
l    id:同HTML标记id属性一样。
l    title:同HTML标记的title属性一样。
l    style:同HTML标记的style属性一样。
l    innerHTML:包含HTML标记中的所有的内容,包括HTML标记等。
l    offsetWidth:元素对象的可见宽度,不带px单位。
l    offsetHeight:元素对象的可见高度,不带px单位。
l    scrollWidth:元素对象的总宽度,包括滚动条中的内容,不带px单位。
l    scrollHeight:元素对象的总高度,包括滚动条中的内容,不带px单位。
l    scrollTop:指内容向上滚动上去了多少距离(有滚动条时才有效),默认值为0
l    scrollLeft:指内容向左滚动过去了多少距离(有滚动条时才有效)。


CSS DOM动态样式
使用JS操作CSS中的各属性。
JS只能操作或修改行内样式。如:imgObj.style.border = “1px solid red”
对于类样式,通过className来赋值。如:imgObj.className = “imgClass”
style对象
每个HTML标记,都有一个style属性。但这个style属性又是一个style对象。
那么,这个style对象的属性有哪些?style对象的属性,与CSS中的属性,一一对应。
因此,style对象用来代替CSS。
如:imgObj.style.border = “1px solid red”;
style对象属性与CSS属性的转换
1)    如果是一个单词,style对象属性,与CSS属性一样。
2)    如果是多个单词,第1单词全小写,后面每个单词首字母大写,并去掉中划线。
i.    divObj.style.backgroundColor = “red”;
ii.    divObj.style.backgroundImage = “url(images/bg.gfi)”;
iii.    divObj.style.fontSize = “18px”;
Event DOM:事件DOM
1、事件简介
    事件主要实现“用户与网页的交互”。
    当事件发生时,去执行JS功能代码。
l    当点击图片时(onClick),将图片放大两倍(JS代码)。
l    当网页加载完成时(onLoad),弹出一个小窗口。
l    当鼠标放到滚动文本上时(onMouseOver),文本停止滚动。
l    当向下拖动滚动条时(onscroll),文本向上滚动
2、常用事件
l    onload:当网页加载完成时。只能给<body>用。
l    onclick:当点击时,所有标记都适用。
l    onscroll:当拖动滚动条时
l    onmouseover:当鼠标放上时
l    onmouseout:当鼠标移开时
l    onsubmit:当提交表单时
l    onreset:当重置表单时
l    onfocus:当获得焦点时,把光标定位到文本框中。
l    onblur:当失去焦点时,把光标从文本框中移开。
l    onchange:当下拉列表内容改变时。用在下拉列表、上传文件。
l    onselect:当选中文本时。
l    onresize:当改变窗口大小时,发生的事件。
3、事件句柄属性
    HTML标记,都有相应的事件属性。
    每一个HTML标记,都对应一个元素对象。元素对象也具有相应的事件属性。
    但是,元素对象的事件属性应该是全小写。
    事件属性后面调用的一般是JS函数,通过JS函数来完成相应的功能。
表格对象的属性
一个<table>标记,对应一个table对象。
l    rows:获取一个表格所有的行构成的数组。
l    cells:获取一个行中所有单元格构成的数组。
1.Event对象简介
当事件发生时,向调用函数,传递一个event参数,这个event参数是一个事件对象。
该event对象中记录了当前事件发生的环境信息。如:单击时的坐标、事件类型等。
注意:这个event对象是“短暂”存在的,新的事件发生,新的event对象产生,原来的event对象消失了。
DOM中Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
(1)通过HTML标记的事件属性来传递event对象
在DOM中,event对象是作为事件调用函数时的参数,传递给函数的。
该event参数,是系统固定写法,全小写,不能加引号,它就是event对象参数。
IE中Event对象
IE中的event对象,是window对象的一个属性,可以通过window对象调用,而不需要传参数。如:window.event
2、DOM中Event对象属性
l    type:当前的事件类型
l    clientX和clientY:距离窗口左边和上边的距离
l    pageX和pageY:距离网页左边和上边的距离
screenX和screenY:距离屏幕左边和上边的距离
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【JS总结】——DOM操作表格和样式

都说HTML做的是静态网页,而JS把网页做活了,那么到底怎么样才算是把网页做活了呢??其实就是JS将网页的各种动作做活了,简单点理解,可以算是动态加载吧。比如网页的CSS,它能够控制网页的样式,如果可...

DOM节点——JS总结

DOM节点——JS总结 节点包括三种:属性节点、元素节点、文本节点 HTML内容: 测试Div倾斜结尾JavaScript内容: (一)属性节点 1.父节点: wind...

【前端攻城狮之路】小总结——JS获取DOM的不同方式

原文地址:http://blog.csdn.net/binzai325/article/details/6777516   内容有添改 JS获取DOM的不同方式 1、getElementById...

js之DOM深入学习总结

DOM编程深入学习

关于语义化的js的总结,DOM、element、text等节点的操作

/*  * 在学习本章之前我们必须要明白node节点,其中包括document节点,characterData节点,element节点,attr节点等,接下来依次解释  * document节点也...

js的DOM对象与Jquery对象的区别和转换方法总结

js的DOM对象与Jquery对象的区别:jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能...

JavaScript学习总结【5】JS DOM

1、DOM 简介   当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档...

JS中常见原生DOM操作API【总结整理)

几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法。常见的Node有 element,text,attribute,comm...
  • hj7jay
  • hj7jay
  • 2016-11-29 10:15
  • 4240

DOM节点和JS

  • 2015-04-29 19:09
  • 1.64MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)