JS-DOM基础
1 JS-DOM
全称:document object model
1.1 获取页面元素
getElementsByTagName():无论元素的数量是多少,都会存入数组
getElementById():
getElemnetsByClassName():不推荐使用,有兼容问题。
1.2 标签的自定义属性
1) 通过在html里直接在标签中添加属性;
2) 通过JS添加属性:标签.属性=值;
3) setAttribute(a,b)设置值为b的属性a,
4) getAttribute(a)获取属性a,
5) removeAttribute(a)移除属性a;
<input type="text" id="t" a="haha"/> <script> var t=document.getElementById("t"); t.c="cc"; console.log(t.c); console.log(t.getAttribute("c")); console.log("\n"); console.log(t.id); console.log(t.a); console.log(t.getAttribute("id")); console.log(t.getAttribute("a")); console.log("\n"); console.log(t.setAttribute("a","bibi")); console.log(t.setAttribute("b","lili")); console.log(t.getAttribute("b")); </script>
结果:
1.3 事件
1.3.1 三要素
1) 事件源(发生事件的对象)
2) 事件名称
3) 事件处理程序(要执行的内容)
如果分不清楚,那么举个栗子:小明被小刚打了,小明就进了医院。那么事件源就是小明,事件名称是:被打了,事件处理就是小明被送进了医院。
1.3.2 注册事件
行内:在对应的标签内添加:on+事件名=“要执行的内容”;
内嵌:
1) 在js标签内书写:对象.on+事件名=function(){执行内容}
2) 事件监听
注意:使用for循环给一组元素添加事件监听的时候,在事件处理里面千万不要出现for循环的计数器。原因:事件注册的时候是不会执行具体的事件处理代码的,所以执行事件时的计数器就会是最后执行的计数器值。
1.3.3 常用事件:
.onclick():点击
.onmouseover:鼠标进入
.onmousemove:鼠标移动
.onmouseout:鼠标移出
.onkeydown:键盘按下
.onkeyup:键盘抬起
1.4 获取内容
1) 对象.innerHTML:包括标签及文字内容
2) 对象.innerText:只包含文字内容,早期火狐不支持
3) 对象.textContent:只包含文字内容,早期ie不支持
1.5 节点
1.5.1 节点的组成
三种节点 |
nodeType |
nodeName |
nodeValue |
标签(元素) |
1 |
标签名 |
Null |
属性 |
2 |
属性名 |
属性值 |
文本(内容) |
3 |
#text |
文本内容 |
<ul id="ul">
<li>111</li>
<li>222</li>123
<li id="li">333</li>
<li>444</li>
</ul>
<script>
var ul = document.getElementById("ul");
var ulId=ul.getAttributeNode("id");
console.log(ulId.nodeName);
console.log(ulId.nodeType);
console.log(ulId.nodeValue); var li = document.getElementById("li");
var lis = ul.childNodes;
for (var i=0;i<lis.length;i++) {
console.log(lis[i].nodeName);
console.log(lis[i].nodeType);
console.log(lis[i].nodeValue);
}
</script>
结果:
1.5.2 节点的获取
父节点:parentNode;
子节点:
childNodes:标准的DOM属性,获取所有,包括文本节点,IE8及以前会忽略空白文本节点
children:非标准DOM属性,只获取元素(标签)节点,所有浏览器都支持。
兄弟节点:
previousSibling:IE8及以前会忽略空白文本节点
previousElementSibling:IE8及以前不支持
nextSibling:IE8及以前会忽略空白文本节点
nextElementSibling:IE8及以前不支持
<ul id="ul"> <li>111</li> <li>222</li>123 <li id="li">333</li>123 123<li>444</li> </ul>
<script> var ul=document.getElementById("ul"); var li=document.getElementById("li"); console.log(ul.childNodes); console.log(ul.children); console.log(li.parentNode); console.log(li.previousSibling); console.log(li.previousElementSibling); console.log(li.nextSibling); console.log(li.nextElementSibling); </script>
在chorm中的执行结果:
IE8中的结果:
总结:
|
Chorm,firefox等 |
IE8及以前 |
.childNodes |
标签节点+文本节点 |
标签节点+非空文本节点 |
.children |
标签节点 |
标签节点 |
.previousSibling |
标签节点||文本节点 |
非空文本节点||标签节点 |
.previousElementSibling |
标签节点 |
Undefined |
.nextSibling |
标签节点||文本节点 |
非空文本节点||标签节点 |
.nextElementSibling |
标签节点 |
Undefined |
1.5.3 操作节点
.cloneNode(boolean):复制节点,true全部克隆,false只克隆当前标签节点
.appendChild():追加节点到末尾
<ul id="ul">
<li>1111</li>
<li>2222</li>
<li id="li">3333</li>
<li>4444</li>
</ul>
<script>
var ul=document.getElementById("ul");
var li=document.getElementById("li");
ul.appendChild(li.cloneNode(true));
ul.appendChild(li.cloneNode(false));
ul.appendChild(ul.cloneNode(true));
</script>
结果:
.removeChild():移除子节点
.insertBefore(a,b):将子元素a插入到b之前
1.6 动态 创建元素
document.write();注意:写在函数内会覆盖原来的页面元素
innerHTML注意:使用它拼接字符串效率非常低
document. createElement("标签名")
JS-DOM基础的更多相关文章
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- Javascript DOM基础(一)概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- 原生js dom记忆的内容
1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)
函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) { return i1 + i2;//如果不写return返回 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础(四)
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础(二)
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
随机推荐
- 【前端】Ember.js学习笔记
Model 在默认情况下,model钩子返回的值,会设置为关联的控制器的model属性.例如,如果App.PostsRoute通过model钩子返回了一个对象,这个对象会设置为App.PostsCon ...
- HQL查询——from子句
HQL查询--from子句 1.from是最基本的HQL语句,from关键字后紧跟持久化类的类名: from Person 表示从Person持久化类中选出全部的实例. 2.推荐为持久化类的每个实例起 ...
- Node.js开发利器
开发工具 WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 做些小型项目用Sublime Text. Browserify:将你 ...
- Arduino 极速入门系列 - 光控灯(1)- 关于理论和 LED 那些事
点个 LED 闪亮好像太单调,这次来个光控 LED 灯.这个其实不需要 Arduino 也能做,这次只是用来演示一下 PWM 在 Arduino 里面的做法.PWM 原理后面会解释.这次用充电宝提供 ...
- Sprint(第十一天11.24)
- ShareSDK 集成 Google+ 登录 400. Error:redirect_uri_mismatch 和 Error Domain=ShareSDKErrorDomain Code=204
最近在集成ShareSDK中 Google+ 登录授权时候 出现了如下几个问题 1. 400. Error:redirect_uri_mismatch 出现这种情况, redirectUri应 ...
- 使用python操作FTP上传和下载
函数释义 Python中默认安装的ftplib模块定义了FTP类,其中函数有限,可用来实现简单的ftp客户端,用于上传或下载文件,函数列举如下 ftp登陆连接 from ftplib import F ...
- angularJS中的ui-router和ng-grid模块
关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里https://github. ...
- OnTimer
OnTimer不是多线程. OnTimer是以SendMessage的方式发送消息到消息队列. sendMessage必须等待对话框响应完消息后才返回.
- 后缀数组(suffix array)
参考: Suffix array - Wiki 后缀数组(suffix array)详解 6.3 Suffix Arrays - 算法红宝书 Suffix Array 后缀数组 基本概念 应用:字 ...