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% ...
随机推荐
- 复旦大学2015--2016学年第一学期(15级)高等代数I期末考试第八大题解答
八.(本题10分) 设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...
- 《Spring MVC学习指南》怎么样?答:书名具有很大的欺骗性
2016年6月21日 最近,因为工作需要,我从网上买了一本<Spring MVC学习指南>,ISBN编号: 978-7-115-38639-7,定价:49.00元.此书是[美]Paul D ...
- 【leetcode❤python】 6. ZigZag Conversion
#-*- coding: UTF-8 -*- #ZigZag Conversion :之字型class Solution(object): def convert(self, s, numRow ...
- C/C++内存泄露探测
1. Visual Leak Detector for VC 在安装后, 只需要包含vld.h头文件即可.内容可以输出到文件或者控制台.
- RecyclerView 制作瀑布流图片
这是瀑布流的效果图 RecyclerView(ListView的升级版) 加载图片用的是第三方图片加载框架 ------------------------------------- 在Xml中 &l ...
- 关于json-p
关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...
- dubbo & zookeeper & springMVC
一.安装准备 1.环境简介 名称 版本 OS Mac OS X 10.11.5 JDK 1.8.0_51 dubbo 2.5.4 tomcat 8.0.35 Zookeeper 3.4.8 maven ...
- mybatis+oracle添加一条数据并返回所添加数据的主键问题
最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...
- C#中使用Linq实现全外连接
每次使用都到处查阅,现在记录下来,备查. var fulljoin = (from s in sampleRegistersjoin t in tensionDatas on new { Beach ...
- SQLiteOpenHelper的使用
一.SQLiteOpenHelper的使用说明: 1. SQLiteOpenHelper时一个抽象类,子类必须实现的方法: *: onCreate(),数据库第一次被创建时调用,在里面可以执行创建表, ...