JS-DOM
2020-04-29 15:53:37 3 举报
AI智能生成
个人前端学习
作者其他创作
大纲/内容
DOM操作
初识别DOM操作
1.认识DOM(Document Object Model)
DOM1级:(1)DOM Core:如何映射基于XML的文档结构,简化对文档任何部分的访问和操作
(2)DOM HTML:在(1)基础上加以扩展,添加了针对HTML的对象和方法
DOM2级:(1)DOM Views(DOM视图):定义了跟踪不同文档视图的接口
(2)DOM Events(DOM事件):定义了事件和事件处理的接口
(3)DOM Style:定义了基于CSS为元素应用样式的接口
(4)DOM Traversal and Range(DOM遍历及范围):定义了遍历和操作文档数的接口
DOM3级:(1)DOM Load And Save:引入了以统一方式加载和保存文档的方法
(2)DOM Validation:验证文档的方法
1.认识DOM(Document Object Model)
DOM1级:(1)DOM Core:如何映射基于XML的文档结构,简化对文档任何部分的访问和操作
(2)DOM HTML:在(1)基础上加以扩展,添加了针对HTML的对象和方法
DOM2级:(1)DOM Views(DOM视图):定义了跟踪不同文档视图的接口
(2)DOM Events(DOM事件):定义了事件和事件处理的接口
(3)DOM Style:定义了基于CSS为元素应用样式的接口
(4)DOM Traversal and Range(DOM遍历及范围):定义了遍历和操作文档数的接口
DOM3级:(1)DOM Load And Save:引入了以统一方式加载和保存文档的方法
(2)DOM Validation:验证文档的方法
节点类型
(1)Element(元素节点):数值常量1;字符常量ELEMENT_NODE
(2)Attr(属性节点):数值常量2;字符常量ATTRIBUTE_NODE
(3)Text(文本节点):数值常量3;字符常量TEXT_NODE
(4)Comment(注释节点):数值常量8;字符常量COMMENT_NODE
(5)Document(文档节点):数值常量9;字符常量DOCUMENT_NONE
(6)DocumentType(文档类型节点):数值常量10;字符常量DOCUMEN_TYPE_NONE
(7)DocumentFragment(文档片段节点):数值常量11;字符常量DOCUMEN_FRAGMENT_NONE
除IE以外所有浏览器都能访问,IE只支持数值常量
(2)Attr(属性节点):数值常量2;字符常量ATTRIBUTE_NODE
(3)Text(文本节点):数值常量3;字符常量TEXT_NODE
(4)Comment(注释节点):数值常量8;字符常量COMMENT_NODE
(5)Document(文档节点):数值常量9;字符常量DOCUMENT_NONE
(6)DocumentType(文档类型节点):数值常量10;字符常量DOCUMEN_TYPE_NONE
(7)DocumentFragment(文档片段节点):数值常量11;字符常量DOCUMEN_FRAGMENT_NONE
除IE以外所有浏览器都能访问,IE只支持数值常量
元素节点类型的判断方法
1、isElement:某个节点是否为元素节点
2、isHTML:是否为HTML文档的元素节点
3、isXML:是否为XML文档的元素节点
4、contains:两个节点的包含关系
1、isElement:某个节点是否为元素节点
2、isHTML:是否为HTML文档的元素节点
3、isXML:是否为XML文档的元素节点
4、contains:两个节点的包含关系
/window.Node,是查看window里是否有这么一个Node对象
//obj instanceof Node,是说明obj是否是Node对象的一个实例,
即是不是new Node出来的
if(window.Node&&(obj instanceof Node)){
//obj instanceof Node,是说明obj是否是Node对象的一个实例,
即是不是new Node出来的
if(window.Node&&(obj instanceof Node)){
testDiv.appendChild(obj);
//把要检验的obj作为子节点添加给testDiv节点
//把要检验的obj作为子节点添加给testDiv节点
testDiv.removeChild(obj);
//把testDiv中为obj的子节点移除
//把testDiv中为obj的子节点移除
文档类型
子主题
XML用于存放格式化数据,其中的很多标签都属于自定义标签,浏览器并不认识标签,Html适用于显示数据
nodetype
节点类型最常用的还是元素节点,属性节点,文本节点
IE浏览器没有内置Node,需使用数值常量,数值常量可兼容所有浏览器
判断节点类型
IE浏览器没有内置Node,需使用数值常量,数值常量可兼容所有浏览器
判断节点类型
nndeName/Value
nodeName获取节点名称,nodeValue获取节点的值
attributes属性可获得节点的所有属性;
childNodes可获得节点的所有子节点;
document.body获得body对象,然后用document.body.childNodes[0]获得body的第二个子元素,原因是其第一个子元素是<body>到<!-- -->之间的空白部分,第二个子元素才是注释部分;
doctype对象不需要获取,直接在控制台中打印document.doctype就可以了;
文档片段节点:用document.creareDocumentFragment()来获取文档片段;
attributes属性可获得节点的所有属性;
childNodes可获得节点的所有子节点;
document.body获得body对象,然后用document.body.childNodes[0]获得body的第二个子元素,原因是其第一个子元素是<body>到<!-- -->之间的空白部分,第二个子元素才是注释部分;
doctype对象不需要获取,直接在控制台中打印document.doctype就可以了;
文档片段节点:用document.creareDocumentFragment()来获取文档片段;
domready:HTML标签通过浏览器解析变成DOM节点,当页面上所有HTML都转换为节点,DOM树构建完, 简称之domReady。
渲染引擎的渲染流程
(1)解析HTML构建DOM树(构建DOM节点):
渲染引擎开始解析HTML并将标签转化为内容树的DOM节点.
(2)构建渲染树(解析样式信息):
解析外部的CSS文件以及style标签中的样式信息,渲染树由
一些包含有各种属性的矩形组成,它们将被按照正确的顺序显示在
屏幕上.
(3)布局渲染树(布局DOM节点):
执行布局的过程,它将确定每个节点在屏幕上的确切左边
(4)绘制渲染树(绘制DOM节点):
绘制即遍历渲染树,并使用UI后端层来绘制每个节点
并不包含解析过程中加载外部资源,如:图片、脚本、iframe等一些过程
上面四步仅仅是HTML结构的渲染过程
(1)解析HTML构建DOM树(构建DOM节点):
渲染引擎开始解析HTML并将标签转化为内容树的DOM节点.
(2)构建渲染树(解析样式信息):
解析外部的CSS文件以及style标签中的样式信息,渲染树由
一些包含有各种属性的矩形组成,它们将被按照正确的顺序显示在
屏幕上.
(3)布局渲染树(布局DOM节点):
执行布局的过程,它将确定每个节点在屏幕上的确切左边
(4)绘制渲染树(绘制DOM节点):
绘制即遍历渲染树,并使用UI后端层来绘制每个节点
并不包含解析过程中加载外部资源,如:图片、脚本、iframe等一些过程
上面四步仅仅是HTML结构的渲染过程
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程
jQuery 极大地简化了 JavaScript 编程
click()和onclick()的区别:
1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么
click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。
2.click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作。此外,如果在click括号内定义了其他可执行语句,则click方法会在执行完onclick事件之后执行括号内部的语句。
我们还可以注意到:onclick是事件,而click是方法,两者是不同的概念。
1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么
click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。
2.click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作。此外,如果在click括号内定义了其他可执行语句,则click方法会在执行完onclick事件之后执行括号内部的语句。
我们还可以注意到:onclick是事件,而click是方法,两者是不同的概念。
$就是jquery对象,$()就是jQuery(),在里面可以传参数,作用就是获取元素。
$在JS中本身只是一个符号而异,在JS里什么也不是。
但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。
后来,可能有些程序员JQUERY用得多了,发现$这个函数很好用,很方便,所以,在不用JQUERY的情况,一般自己也会自定义一个$函数。
$在JS中本身只是一个符号而异,在JS里什么也不是。
但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。
后来,可能有些程序员JQUERY用得多了,发现$这个函数很好用,很方便,所以,在不用JQUERY的情况,一般自己也会自定义一个$函数。
avascript + query
说白了就是一些javascript代码而已,对外提供一些接口,让程序员不用再关注javascript烦人的语法和n多的要记住的东西。
jquery是对javascript的一种封装,也就是它把一些具体的实现写好了,你只需要调用它就可以了。
你下载下来就会发现,它本身就是js代码,说白了它本身就是javascript代码。只是把一些经常用到的方法或者叫实现给写出来了,程序员就不用再去费脑子写那些实现了,调用一下就可以了。
说白了就是一些javascript代码而已,对外提供一些接口,让程序员不用再关注javascript烦人的语法和n多的要记住的东西。
jquery是对javascript的一种封装,也就是它把一些具体的实现写好了,你只需要调用它就可以了。
你下载下来就会发现,它本身就是js代码,说白了它本身就是javascript代码。只是把一些经常用到的方法或者叫实现给写出来了,程序员就不用再去费脑子写那些实现了,调用一下就可以了。
创建节点
// 基础创建方法:
// 第一步:获取ul对象:
var ul = document.getElementById("myList_1");
// 第二步:创建li标签:
var li = document.createElement("li");
// 第三步:把新创建好的li放入到ul里:
ul.appendChild(li);
// 第四步:创建一个文本节点并传入一个文本内容:
var text = document.createTextNode("新闻");
// 第五步:把创建好的文本节点放入到li里:
li.appendChild(text);
// 基础创建方法:
// 第一步:获取ul对象:
var ul = document.getElementById("myList_1");
// 第二步:创建li标签:
var li = document.createElement("li");
// 第三步:把新创建好的li放入到ul里:
ul.appendChild(li);
// 第四步:创建一个文本节点并传入一个文本内容:
var text = document.createTextNode("新闻");
// 第五步:把创建好的文本节点放入到li里:
li.appendChild(text);
// 带有documemt.createDOocumentFragment()以及document.createComment()方法:
// 第九步:创建注释节点:
var comment = document.createComment("————这是注释———");
// 第六步:创建文档片段:
var fragment = document.createDocumentFragment();
// 第一步:获取ul对象:
var ul2 = document.getElementById("myList_2");
// 第二步:创建一个空的li:
var li2 = null;
// 第三步:通过for循环创建三个li:
for(var i=0;i<3;i++) {
// 第四步:为li变量赋值,通过document.createElement创建li节点:
li = document.createElement("li");
// 第五步:给li传入文本节点
li.appendChild(document.createTextNode("Item"+(i+1)));
// 第七步:将li放入文档片段里:
fragment.appendChild(li);
// 第八步:将文档片段放入ul里:
ul.appendChild(fragment);
// 第十步:将注释插入到ul上方:
document.body.insertBefore(comment,document.body.firstChild); // 第二个参数实际上就是获取到的变量ul2
}
// 第九步:创建注释节点:
var comment = document.createComment("————这是注释———");
// 第六步:创建文档片段:
var fragment = document.createDocumentFragment();
// 第一步:获取ul对象:
var ul2 = document.getElementById("myList_2");
// 第二步:创建一个空的li:
var li2 = null;
// 第三步:通过for循环创建三个li:
for(var i=0;i<3;i++) {
// 第四步:为li变量赋值,通过document.createElement创建li节点:
li = document.createElement("li");
// 第五步:给li传入文本节点
li.appendChild(document.createTextNode("Item"+(i+1)));
// 第七步:将li放入文档片段里:
fragment.appendChild(li);
// 第八步:将文档片段放入ul里:
ul.appendChild(fragment);
// 第十步:将注释插入到ul上方:
document.body.insertBefore(comment,document.body.firstChild); // 第二个参数实际上就是获取到的变量ul2
}
document.createElement还能支持创建当前浏览器不支持的标签名,在IE6~8下,这是一个著名的hack。
document.body.insertBefore(要插入到前面的节点,要插入的节点所在位置);
document.createDocumentFragment()创建文档片段:文档片段就是来帮助我们,把创建的一大堆新元素都放在文档片段中,然后提交给文档中。
特别注意两个点:
当把文档片段插入DOM树的时候,只会把它的子节点插进去,它作为容器本身是不会进入DOM树的。
当把DOM树中的节点插入文档片段的时候,这些节点,会真的从DOM树种消失。我们也把这个过程叫做劫持。
类比的话,就好像自助餐厅,文档片段是我们的托盘,先在取餐区里面把想要的东西都放在托盘里面,也可以把自己桌子上已经有的东西放在托盘里,再把托盘里的全部东西都放在饭桌上,当然托盘本身不需要的
对性能提升很有帮助哦,也可以减少重排。
document.body.insertBefore(要插入到前面的节点,要插入的节点所在位置);
document.createDocumentFragment()创建文档片段:文档片段就是来帮助我们,把创建的一大堆新元素都放在文档片段中,然后提交给文档中。
特别注意两个点:
当把文档片段插入DOM树的时候,只会把它的子节点插进去,它作为容器本身是不会进入DOM树的。
当把DOM树中的节点插入文档片段的时候,这些节点,会真的从DOM树种消失。我们也把这个过程叫做劫持。
类比的话,就好像自助餐厅,文档片段是我们的托盘,先在取餐区里面把想要的东西都放在托盘里面,也可以把自己桌子上已经有的东西放在托盘里,再把托盘里的全部东西都放在饭桌上,当然托盘本身不需要的
对性能提升很有帮助哦,也可以减少重排。
document.createElement()可创建元素节点
document.createTextNode()可创建文本节点
document.createDocumentFragment()可创建文档片段
document.createComment()可创建注释节点
document.createTextNode()可创建文本节点
document.createDocumentFragment()可创建文档片段
document.createComment()可创建注释节点
ele.outHTML;包括节点ele及其内部所有节点内容;ele.innerHTML="a";将包括节点ele及其内部所有节点内容变为a
tips:
1)script中innerHTML添加的内容最前面如果有空格,IE浏览器会将空格去掉;而chrome不会
2)defer;行内属性,该属性规定在页面加载完之后再执行script脚本,只在IE浏览器中有效
3)大多数浏览器不支持在innerHTML=中插入script标签,只有IE8及更早的IE版本有效,1、不过要在<script defer>内添加defer属性;2、且必须是有作用域的元素(即插入的元素内必须有内容,随便插入点内容就行,如_),也可以使用<input type=\"hidden\";的方式为其添加内容
1)script中innerHTML添加的内容最前面如果有空格,IE浏览器会将空格去掉;而chrome不会
2)defer;行内属性,该属性规定在页面加载完之后再执行script脚本,只在IE浏览器中有效
3)大多数浏览器不支持在innerHTML=中插入script标签,只有IE8及更早的IE版本有效,1、不过要在<script defer>内添加defer属性;2、且必须是有作用域的元素(即插入的元素内必须有内容,随便插入点内容就行,如_),也可以使用<input type=\"hidden\";的方式为其添加内容
ele.innerText: 打印标签中的内容不包括标签,从起始位置到终止位置的所有文本内容, 但它去除Html标签。
ele.innerText="<p></p>"标签会被打印出来
ele.innerText="<p></p>"标签会被打印出来
ele.outerText: 打印标签中的内容不包括标签
ele.outerText="<p></p>"标签会被打印出来,并取代原来的标签
ele.outerText="<p></p>"标签会被打印出来,并取代原来的标签
遍历节点
firstChild:第一个子节点
lastChild:最后一个子节点
parentNode:父节点
nextSibling:下一个紧挨的兄弟节点
previousSibling:上一个紧挨的兄弟节点
childNodes[1]或者 childNodes.item(1) 查找第几个子节点
lastChild:最后一个子节点
parentNode:父节点
nextSibling:下一个紧挨的兄弟节点
previousSibling:上一个紧挨的兄弟节点
childNodes[1]或者 childNodes.item(1) 查找第几个子节点
区分firstChild和childNodes的区别
firstChild表示第一个子节点, 这个子节点包括元素节点,文本节点或者注释节点
childNodes 返回节点的子节点集合,包括元素节点、文本节点还有属性节点。
firstChild表示第一个子节点, 这个子节点包括元素节点,文本节点或者注释节点
childNodes 返回节点的子节点集合,包括元素节点、文本节点还有属性节点。
ul和第一个li之间有个空白节点,每两个li之间也有一个空白节点
documentElement属性可返回文档的根节点
tagName属性返回元素的标签名
任何节点都可以通过ownerDocument获得Document(文档节点)
hasChildNodes():判断某个节点是否含有子节点
tagName属性返回元素的标签名
任何节点都可以通过ownerDocument获得Document(文档节点)
hasChildNodes():判断某个节点是否含有子节点
你好,可以参考下面的结构:
li-->ul-->div-->body-->html-->document
所以通过li找到document需要使用5次parentNode父节点。
li-->ul-->div-->body-->html-->document
所以通过li找到document需要使用5次parentNode父节点。
使用childElementCount返回的是所有元素子节点,需要注意的是返回的是直接子元素节点,不是后代元素节点
NodeList对象
Array.prototype.slice.call(nodeList);
而calll()方法的作用就是帮助一个对象去调用另一个对象的方法。
所以这句代码可以简单的理解为,通过call()方法,让nodeList能够使用数组的slice的方法。
而calll()方法的作用就是帮助一个对象去调用另一个对象的方法。
所以这句代码可以简单的理解为,通过call()方法,让nodeList能够使用数组的slice的方法。
1.在js中,Array是创建数组的一个全局对象,你可以理解为它是所有数组的一个祖先。所有的对象,都会存在一个prototype,意思是原型,slice就是Array原型上面的方法。
2.NodeList对象是一个节点的集合,不是一个数组,因此NodeList并没有slice这个方法。
2.NodeList对象是一个节点的集合,不是一个数组,因此NodeList并没有slice这个方法。
HTMLCollection类数组对象
docment.scripts 返回页面中全部scripts的元素集合
document.links 返回页面中全部的 a元素的集合
document.images 返回页面中全部img(图片元素)的集合
document.forms 获取的是表单元素的集合
tr.cells 获取的是tr中所有td元素的集合
select.options 返回select中的所有选项
document.links 返回页面中全部的 a元素的集合
document.images 返回页面中全部img(图片元素)的集合
document.forms 获取的是表单元素的集合
tr.cells 获取的是tr中所有td元素的集合
select.options 返回select中的所有选项
可以在控制台看到他们的_proto_(原型的意思)都是类数组对象HTMLCollection
cells.namedItem('td')
查找是否有id为td的td元素第一个并返回,若没有,查找name为td的第一个td元素并返回
查找是否有id为td的td元素第一个并返回,若没有,查找name为td的第一个td元素并返回
类数组对象NamedNodeMap
用ele.attributes方法
类数组对象NamedNodeMap 返回的是元素属性的集合
可以得到元素attribute(属性)集合
可用方法:.length 数组长度
.item() 、[] 两种 方式可获取其中某个属性,从0开始 索引。
类数组对象NamedNodeMap 返回的是元素属性的集合
可以得到元素attribute(属性)集合
可用方法:.length 数组长度
.item() 、[] 两种 方式可获取其中某个属性,从0开始 索引。
类数组对象的动态性
-NodeList,HTMLCollection,NameNodeMap三个集合都是动态的,是有生命、有呼吸的对象
-它们实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反应这些对象中
-每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息
为解决动态性带来的死循环,先计算出长度保存到变量中,再增加新的元素;
-NodeList,HTMLCollection,NameNodeMap三个集合都是动态的,是有生命、有呼吸的对象
-它们实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反应这些对象中
-每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息
为解决动态性带来的死循环,先计算出长度保存到变量中,再增加新的元素;
获取节点
getElementById()和getElementsByName()这两个方法调用时前面必须是document,其他方法调用时前面可以是document也可以是元素节点。
getElementById()方法
若有两个ID相同的元素,始终只能获取到第一个
若有两个ID相同的元素,始终只能获取到第一个
etElementById()
通过id获取节点,只能用document对象调用。IE6~8也可以使用,但在IE8以下存在一个bug:若name属性和id属性的内容相同,则浏览器会自动取先出现的属性,所以有可能会取到name属性,而不是id属性,该bug只在IE8版本以下的浏览器出现。
通过id获取节点,只能用document对象调用。IE6~8也可以使用,但在IE8以下存在一个bug:若name属性和id属性的内容相同,则浏览器会自动取先出现的属性,所以有可能会取到name属性,而不是id属性,该bug只在IE8版本以下的浏览器出现。
//首先封装一个函数 通过ID获取元素
var getElementByID = function(id){
var el = document.getElementById(idValue);
if(!+"/v1"){
//在IE浏览器中,/v不会被编译,/v1=v1,用+号连接后返回值为NaN,!NaN为true。
//而在其他浏览器中,/v编译为空格,/v1=1,!1为false。
if(el&&el.id===id){ //查收是否包含id的元素
return el
}else{
var els = document.all[id]; //遍历所有包含id参数的元素,然后进行逐个匹配
n = els.length;
for(var i = 0;i<n;i++){
if(els[i].id===id){
return els[i];
}
}
}
}
return el;
}
var getElementByID = function(id){
var el = document.getElementById(idValue);
if(!+"/v1"){
//在IE浏览器中,/v不会被编译,/v1=v1,用+号连接后返回值为NaN,!NaN为true。
//而在其他浏览器中,/v编译为空格,/v1=1,!1为false。
if(el&&el.id===id){ //查收是否包含id的元素
return el
}else{
var els = document.all[id]; //遍历所有包含id参数的元素,然后进行逐个匹配
n = els.length;
for(var i = 0;i<n;i++){
if(els[i].id===id){
return els[i];
}
}
}
}
return el;
}
getElementByName() 返回对象的集合 只能通过document对象调用,
getElementsByName在IE6和OPERA 7.5下有bug,他们会返回ID值为给定值的元素,其次他们仅仅返回input和img元素
getElementsByName()
返回的结果是一个集合
getElementsByName在IE6和OPERA 7.5下有bug,他们会返回ID值为给定值的元素,其次他们仅仅返回input和img元素
getElementsByName()
返回的结果是一个集合
getElementsByTagName()参数不区分大小写,返回集合
nodeValue可以获取文本内容
getElementsByTagName('!') 获取注释 ----IE到IE8才能使用
getElementsByTagName('*') 获取所有元素
nodeValue可以获取文本内容
getElementsByTagName('!') 获取注释 ----IE到IE8才能使用
getElementsByTagName('*') 获取所有元素
getElementsByClassName()方法
该方法可返回带有指定类名的对象的集合,如果要获取某个元素的话,一定要带上下标。
该方法可返回带有指定类名的对象的集合,如果要获取某个元素的话,一定要带上下标。
querySelector()返回文档中匹配指定CSS选择器的一个元素
目前主流浏览器基本都支持这两个属性【如果找不到匹配的元素则返回null】
querySelectorAll()和querySelector()方法返回的是一个静态的NodeList,所谓静态NodeList就是对底层document的更改不会影响到返回的这个NodeList对象.此时返回的NodeList只是querySelectorAll()方法被调用时的文档状态的快照。
querySelectorAll()和querySelector()方法返回的是一个静态的NodeList,所谓静态NodeList就是对底层document的更改不会影响到返回的这个NodeList对象.此时返回的NodeList只是querySelectorAll()方法被调用时的文档状态的快照。
querySelectorAll()返回文档中匹配指定CSS选择器的一组元素
操作节点的方法
appendchild:为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。
如果添加的是新创建的节点,那么是在指定元素节点的最后一个子节点之后添加这个节点;如果添加的是已经存在的一个节点,那么是把这个节点移动到指定元素节点的最后一个子节点之后。
如果添加的是新创建的节点,那么是在指定元素节点的最后一个子节点之后添加这个节点;如果添加的是已经存在的一个节点,那么是把这个节点移动到指定元素节点的最后一个子节点之后。
insertBefore() 在指定的已有子节点之前插入新的子节点。
传两个参数,第一个是新节点,第二个是要插入到哪个节点前面。
如果要插到最后,第二个参数传null。【实现了与appendChild()一样的功能】
返回值是新插入的节点。
这个方法可以将新节点插入到任意位置。【插入到第一个子节点之前可以用firstElementChild,插入到最后一个子节点之前可以用lastElementChild】
传两个参数,第一个是新节点,第二个是要插入到哪个节点前面。
如果要插到最后,第二个参数传null。【实现了与appendChild()一样的功能】
返回值是新插入的节点。
这个方法可以将新节点插入到任意位置。【插入到第一个子节点之前可以用firstElementChild,插入到最后一个子节点之前可以用lastElementChild】
replaceChild(要插入的节点,被替换的节点);
返回被替换的节点;
返回被替换的节点;
cloneNode(boolean); 创建节点的拷贝,返回该副本;
参数默认为false,如果写true,则为深度复制(包括子节点全部复制)
参数默认为false,如果写true,则为深度复制(包括子节点全部复制)
normalize()合并相邻的文本节点,移除空的文本节点
splitText(n)
-按照指定的位置把文本节点分割为两个节点
-返回新的文本节点
参数n:节点node从索引n开始拆分,但不包括索引n【索引n从0开始】
-按照指定的位置把文本节点分割为两个节点
-返回新的文本节点
参数n:节点node从索引n开始拆分,但不包括索引n【索引n从0开始】
删除节点
removeChild():删除某个节点中指定的子节点,removeChild()必须有参数
removeNode():IE的私有实现,将目标节点从文档中删除,返回目标节点,参数是布尔值,默认值是false。如果参数为true,不仅删除父元素也删除子元素
属性
属性分类
property为HTML固有属性,事先已经有的绑定的原始属性
attribute为在HTML元素上自定义的属性,后期定义的属性;自定义属性在固有属性列表里是不存在的。
使用div.attributes可以获取div的所有属性【包括固有属性和自定义属性】,返回的是NamedNodeMap这样一个对象。
如果定义同名的自定义属性,后定义的会被删除掉,只显示先定义的
属性名即使给了大写也会被转为小写
获取自定义属性的值
div.attributes.getNamedItem('xxx').nodeValue或者下面那种
div.attributes['xxx'].nodeValue
attributes 属性返回指定节点的属性集合,getNamedItem()方法可返回指定的属性节点,只能访问显示定义的属性,比如id没在上面写出,用该方法访问报错
div.attributes.getNamedItem('xxx').nodeValue或者下面那种
div.attributes['xxx'].nodeValue
attributes 属性返回指定节点的属性集合,getNamedItem()方法可返回指定的属性节点,只能访问显示定义的属性,比如id没在上面写出,用该方法访问报错
删除自定义属性
div.attributes.removeNamedItem("yyy");
div.attributes.removeNamedItem("yyy");
创建一个自定义属性
var attr = document.createAttribute("data-title");
attr.value="ddd";
div.attributes.setNamedItem(attr);
var attr = document.createAttribute("data-title");
attr.value="ddd";
div.attributes.setNamedItem(attr);
getAttribute()可以获得指定属性名的属性值(自定义属性或固有属性)
div.setAttribute(属性名,属性值);为指定的节点设置属性和属性值;
既可以创建新的属性值,也可以修改已有值;
既可以创建新的属性值,也可以修改已有值;
使用removeAttribute('属性名')可以移除自定义属性,但固有属性无法移除。
自定义属性是无法通过 console.log(【对象.属性】)这个方法来获取的,打印结果会是undefined。
若固有属性没赋值,则返回默认值。
若固有属性没赋值,则返回默认值。
getNameItem()获得属性
removeNamedItem()移除属性
setNamedItem()创建属性
removeNamedItem()移除属性
setNamedItem()创建属性
其他属性
布尔属性
inputs[0].checked = "checked" 或者inputs[0].checked = true 效果都一样,因为他会进行隐式转换,将 "checked" 字符串转为布尔值true,所以这个字符串只要能转成true就行,不管写了什么。
inputs[0].checked = "checked" 或者inputs[0].checked = true 效果都一样,因为他会进行隐式转换,将 "checked" 字符串转为布尔值true,所以这个字符串只要能转成true就行,不管写了什么。
布尔属性:即你不管把属性值设置成什么,都会自动的转化为true 或者 false , 不推荐此方法 IE7及以下不支持
如:checked ( 默认选中 , 一般用于checkbox)
selected ( 默认选中 ,一般用于option)
readOnly(O必须大写) (不能修改默认值 , 但不影响数据传输 , 后端仍然可以获得该数据)
disabled (提交后后端不会获得该数据)
multiple ( 多选 , 按住ctrl和shift可以多选)
hidden ( 隐藏 );Html5新增属性
JavaScript操作这些固有属性还是用 node.prop
如:checked ( 默认选中 , 一般用于checkbox)
selected ( 默认选中 ,一般用于option)
readOnly(O必须大写) (不能修改默认值 , 但不影响数据传输 , 后端仍然可以获得该数据)
disabled (提交后后端不会获得该数据)
multiple ( 多选 , 按住ctrl和shift可以多选)
hidden ( 隐藏 );Html5新增属性
JavaScript操作这些固有属性还是用 node.prop
常见的字符串属性:
id:表示元素的唯一标识(同一个页面不可出现相同id值的元素)
title:可见元素,在鼠标掠过的时候提示信息
href:用于a标签link标签,表示超链接
src:用于img、radio、script等,表示数据的来源。用来引入外部的资源
lang:是language,表示辅助搜索引擎、印刷机、读音器来使用的属性; 好处:协助作用(搜索引擎搜索,语音合成,符号异体字高质量印刷,选择一套引号,解决连字符绑定空格问题,拼写语法检查)【lang="zh"表示中文,lang="zh-cn"表示简体中文,lang="zh-sg"表示新加坡,hk表示香港】
dir:用于文本的输出方向(LTR【从左向右】,RTL【从右向左】),一般和bdo元素一起出现【<bdo dir="ltr"></bdo>】
accesskey:表示组合键通过键盘的快捷键使某个元素被选中,可以给元素定义一个访问它的快捷键【如:accesskey="a",通过alt+a可选中该元素】
name :控件名,用于表单元素
value:用于表单元素,传到后台的值,可以通过js获取
class:表示定义在元素上引用的样式,可以给某个元素添加一个样式,可以在js中通过className属性来进行动态的读取和设置某个元素的class属性
id:表示元素的唯一标识(同一个页面不可出现相同id值的元素)
title:可见元素,在鼠标掠过的时候提示信息
href:用于a标签link标签,表示超链接
src:用于img、radio、script等,表示数据的来源。用来引入外部的资源
lang:是language,表示辅助搜索引擎、印刷机、读音器来使用的属性; 好处:协助作用(搜索引擎搜索,语音合成,符号异体字高质量印刷,选择一套引号,解决连字符绑定空格问题,拼写语法检查)【lang="zh"表示中文,lang="zh-cn"表示简体中文,lang="zh-sg"表示新加坡,hk表示香港】
dir:用于文本的输出方向(LTR【从左向右】,RTL【从右向左】),一般和bdo元素一起出现【<bdo dir="ltr"></bdo>】
accesskey:表示组合键通过键盘的快捷键使某个元素被选中,可以给元素定义一个访问它的快捷键【如:accesskey="a",通过alt+a可选中该元素】
name :控件名,用于表单元素
value:用于表单元素,传到后台的值,可以通过js获取
class:表示定义在元素上引用的样式,可以给某个元素添加一个样式,可以在js中通过className属性来进行动态的读取和设置某个元素的class属性
W3C全局属性:(所有HTML都永远的属性)
accesskey、 class、
contenteditable是否可编辑元素的内容,一般和spellcheck组合使用
spellcheck检查编辑是否符合某一语法
hidden :隐藏元素,通过js可以将隐藏的元素显示出来
dir、 id、 lang
style :可以定义元素的样式
tabindex规定使用“tab”建进行导航时元素的顺序
translate规定是否翻译元素内容,目前所有主流浏览器都不支持
title、dir、name、value、accesskey、class
accesskey、 class、
contenteditable是否可编辑元素的内容,一般和spellcheck组合使用
spellcheck检查编辑是否符合某一语法
hidden :隐藏元素,通过js可以将隐藏的元素显示出来
dir、 id、 lang
style :可以定义元素的样式
tabindex规定使用“tab”建进行导航时元素的顺序
translate规定是否翻译元素内容,目前所有主流浏览器都不支持
title、dir、name、value、accesskey、class
data 新增属性 data- js中用dataset获取(浏览器设置好的)如果是data后面-,直接换成点 . 就好。如果是多个-分隔 的,字符串,用驼峰来获取如data-xxx-yyy,则dataset.xxxYyy
DOM基础
JavaScript DOM基础
DOM是Document Object Model(文档对象模型)的缩写
文档对象模型(DOM)是HTML和XML文档的编程接口,它提供了对文档结构化的表述,并定义了一种方式可以使从程序中对结构进行访问,从而改变文档的结构、样式和内容。
DOM是Document Object Model(文档对象模型)的缩写
文档对象模型(DOM)是HTML和XML文档的编程接口,它提供了对文档结构化的表述,并定义了一种方式可以使从程序中对结构进行访问,从而改变文档的结构、样式和内容。
DOM的查找方法
1、语法:document.getElementById("id")
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
举个栗子:
<body>
<div class="box" id="box">
元素
</div>
<script>
//获取id为box的这个元素
var box=document.getElementById("box");
console.log(box); //返回 id为box的div ,若万一有两个id一样的元素,返回第一个
</script>
</body>
<body>
<div class="box" id="box">
元素
</div>
<script>
//获取id为box的这个元素
var box=document.getElementById("box");
console.log(box); //返回 id为box的div ,若万一有两个id一样的元素,返回第一个
</script>
</body>
2(加在ById后面).document.getElementsByTagName("tag")
返回值:数组
功能:返回一个对所有tag标签引用的集合
说明:tag为要获取的标签名称
返回值:数组
功能:返回一个对所有tag标签引用的集合
说明:tag为要获取的标签名称
给元素设置样式
语法:ele.style.styleName=styleValue
功能:设置ele元素的CSS样式
说明:
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用”-“,连字符形式的属性名称使用驼峰命名形式,如:font-size写为fontSize)
3、styleValue为设置的样式值
功能:设置ele元素的CSS样式
说明:
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用”-“,连字符形式的属性名称使用驼峰命名形式,如:font-size写为fontSize)
3、styleValue为设置的样式值
className
获取
语法:ele.className
功能1:返回ele元素的class属性
功能1:返回ele元素的class属性
设置
语法1:ele。className=“cls”
功能2:设置ele元素的class属性为cls
功能2:设置ele元素的class属性为cls
innerHTML
获取
语法:ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML
功能:返回ele元素开始和结束标签之间的HTML
设置
语法:ele.innerHTML="html"
功能:设置ele元素开始和结束标签之间的HTML内容为html
功能:设置ele元素开始和结束标签之间的HTML内容为html
获取DOM元素属性或添加属性
获取属性
语法:ele.getAttribute("attribute")
功能:获取ele元素的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要获取的html属性(如:id、type)
获取标签属性语法:DOM对象.属性,如p.id
语法:ele.getAttribute("attribute")
功能:获取ele元素的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要获取的html属性(如:id、type)
获取标签属性语法:DOM对象.属性,如p.id
【正常获取属性只需要 dom对象.属性名
但这种方式不能获得class属性,要写成 dom对象.className 才行【也可以写成 dom对象.getAttribute("class") 】
自定义属性无法通过这种方式获得,因此需要getAttribute("")】
但这种方式不能获得class属性,要写成 dom对象.className 才行【也可以写成 dom对象.getAttribute("class") 】
自定义属性无法通过这种方式获得,因此需要getAttribute("")】
设置属性
语法:ele.setAttribute("attribute",value)
功能:在ele元素上设置属性
说明:
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
语法:ele.setAttribute("attribute",value)
功能:在ele元素上设置属性
说明:
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
【注意:1、setAttribute方法必须要有两个参数
2、如果value是字符串,需加引号
3、setAttribute()有兼容性问题】
2、如果value是字符串,需加引号
3、setAttribute()有兼容性问题】
删除属性
语法:ele.removeAttribute("attribute")
功能:删除ele上的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
语法:ele.removeAttribute("attribute")
功能:删除ele上的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
DOM事件
事件绑定
HTML事件:直接在HTML元素标签内添加事件,执行脚本。
鼠标事件1
onload:页面加载时触发
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfoucs:获得焦点时触发
onblur:失去焦点时触发
onchange:域的内容改变时触发
onload:页面加载时触发
onclick:鼠标点击时触发
onmouseover:鼠标滑过时触发
onmouseout:鼠标离开时触发
onfoucs:获得焦点时触发
onblur:失去焦点时触发
onchange:域的内容改变时触发
//切记:
1)参数this始终表示引用的元素ele,
2)HTML中this在函数参数的位置对应script中函数的参数位置(例:在HTML中<ele function(a,this);>;this是第二个参数,那么在script中function(x,y)第二个参数y就是this;
2)因为是在HTML中调用了script内的函数,所以,script中函数的参数最终值=HTML中元素ele内设置的参数值;
1)参数this始终表示引用的元素ele,
2)HTML中this在函数参数的位置对应script中函数的参数位置(例:在HTML中<ele function(a,this);>;this是第二个参数,那么在script中function(x,y)第二个参数y就是this;
2)因为是在HTML中调用了script内的函数,所以,script中函数的参数最终值=HTML中元素ele内设置的参数值;
事件类型:onfocus和onblur
onfocus用于表单input标签type为text/password/textarea等。
onfocus用于表单input标签type为text/password/textarea等。
onchanage事件一般作用域select或checkbox或radio
当前DOM对象若是下拉菜单时,想要获取当前选中的值时,有两种获取方式:
1、var bgcolor=this.value;
2、var bgcolor=menu(表示DOM对象).options[(DOM对象).selectedIndex].value;
当前DOM对象若是下拉菜单时,想要获取当前选中的值时,有两种获取方式:
1、var bgcolor=this.value;
2、var bgcolor=menu(表示DOM对象).options[(DOM对象).selectedIndex].value;
代码执行顺序是从上往下的,
<script></script> 一般放在body的最后,
当script在内容上面的时候可以使用windows.onload = funcition{
// 页面加载完毕后执行的内容
<script></script> 一般放在body的最后,
当script在内容上面的时候可以使用windows.onload = funcition{
// 页面加载完毕后执行的内容
DOM0级事件:通过DOM获取到html元素
语法:
ele.事件 = 函数名 (不能加括号,加了括号会在页面打开时就进行)
功能:
在DOM对象上绑定事件
注意:
执行脚本可以是一个匿名函数,也可以是一个函数的调用
-->
语法:
ele.事件 = 函数名 (不能加括号,加了括号会在页面打开时就进行)
功能:
在DOM对象上绑定事件
注意:
执行脚本可以是一个匿名函数,也可以是一个函数的调用
-->
<div class="lock" id="btn">锁定</div>
<script>
//获取按钮
var btn=document.getElementById("btn");
//给按钮绑定事件,this是对该DOM元素的引用
btn.onclick=function(){
//判断如果按钮是锁定,则点击后显示为解锁,变为灰色,否则显示为锁定,变为蓝色
方法一:
if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
<script>
//获取按钮
var btn=document.getElementById("btn");
//给按钮绑定事件,this是对该DOM元素的引用
btn.onclick=function(){
//判断如果按钮是锁定,则点击后显示为解锁,变为灰色,否则显示为锁定,变为蓝色
方法一:
if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
方法二:
if(this.innerHTML=="锁定"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
</script>
if(this.innerHTML=="锁定"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
</script>
【鼠标事件2】
-onsubmit:表单中的确认按钮被点击时发生【onsubmit事件不是加在按钮上,而是表单上。】
-onmousedown:鼠标按钮在元素上按下时触发
-onmousemove:在鼠标指针移动时发生
-onmouseup:在元素上松开鼠标按钮时触发
-onresize:当调整浏览器窗口的大小时触发
-onscroll:拖动滚动条滚动时触发
-onsubmit:表单中的确认按钮被点击时发生【onsubmit事件不是加在按钮上,而是表单上。】
-onmousedown:鼠标按钮在元素上按下时触发
-onmousemove:在鼠标指针移动时发生
-onmouseup:在元素上松开鼠标按钮时触发
-onresize:当调整浏览器窗口的大小时触发
-onscroll:拖动滚动条滚动时触发
键盘事件
onkeydown:在用户按下一个键盘时发生
onkeypress:在按下键盘时发生(只会响应字母与数字符号)
onkeyup:在键盘被松开时的发生
keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码。
onkeypress:在按下键盘时发生(只会响应字母与数字符号)
onkeyup:在键盘被松开时的发生
keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码,或键的代码。
键盘事件触发顺序:
1、onkeydown
2、onkeypress
3、onkeyup
1、onkeydown
2、onkeypress
3、onkeyup
0 条评论
下一页