文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

注:一般说的JS让页面动起来泛指JavaScript和Dom。

1、选择器

document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');

2、内容

innerText
innerHTML var obj = document.getElementById('nid')
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>hello</h1>" # 设置HTML内容 特殊的:
input系列
textarea标签
select标签 value属性操作用户输入和选择的值

3、创建标签

方式一:
var obj = document.createElement('a');
obj.href = "http://www.etiantian.org";
obj.innerText = "hello DOM"; var container = document.getElementById('container');
//container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById('hhh')); 方式二:
var container = document.getElementById('container');
var obj = "<input type='text' />";
container.innerHTML = obj;
// 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
//container.insertAdjacentHTML("beforeEnd",obj);

4、标签属性

var obj = document.getElementById('container');
固定属性
obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "88px"; 自定义属性
obj.setAttribute(name,value) // 设置属性
obj.getAttribute(name) // 获取属性
obj.removeAttribute(name) // 删除属性

5、提交表单

document.geElementById('form').submit();

6、事件

特殊的:

window.onload = function(){}
//jQuery:$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。  
//图片还么有渲染,就可以进行事件的执行。

特殊参数:this,event

7、特殊功能

console.log()      // 后台输出显示
alert() // 页面弹出对话框,显示内容信息
confirm() // URL和刷新
location.href // 显示URL
location.href = "url" window.location.reload() // 刷新页面 // 定时器
setInterval("alert()",2000); // 设置定时器,单位 毫秒
clearInterval(obj); // 清除
setTimeout(); // 设置超时时间
clearTimeout(obj) ;

8、例子

8.1 跑马灯

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<title>欢迎大王莅临指导  </title>
<script type='text/javascript'>
function Go(){
var content = document.title;
var firstChar = content.charAt(0)
var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval('Go()',1000);
</script>
</head>
<body>
</body>
</html>

8.2 搜索框

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title> <style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
<script type="text/javascript">
function Enter(){
var id= document.getElementById("tip")
id.className = 'black';
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
}
}
function Leave(){
var id= document.getElementById("tip")
var val = id.value;
if(val.length==0||id.value.trim()==''){
id.value = '请输入关键字'
id.className = 'gray';
}else{
id.className = 'black';
}
}
</script>
</head>
<body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>
</body>
</html>

DOM笔录的更多相关文章

  1. python之路-笔录3[BOM&DOM&JQuery]

    *** 目录 *** 1. BOM 学习 2. DOM 学习 3. jQuery 学习 *** END *** 1. BOM BOM(Browser Object Model)是指浏览器对象模型,它使 ...

  2. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  3. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  5. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  6. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  7. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  8. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  9. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

随机推荐

  1. 错误:XMLHttpRequest cannot load

    原因:Chrome浏览器不支持本地ajax访问,具体就是ajax不能访问file 有3种解决办法:http://frabbit2013.blog.51cto.com/1067958/1254285 其 ...

  2. CuratorFramework入门指南

    CuratorFramework入门指南 原文地址:https://github.com/Netflix/curator/wiki/Getting-Started CuratorFramework作为 ...

  3. MapReduce工作原理(简单实例)

    Map-Reduce框架的运作完全基于<key,value>对,即数据的输入是一批<key,value>对,生成的结果也是一批<key,value>对,只是有时候它 ...

  4. HDU3394Railway Tarjan连通算法

    There are some locations in a park, and some of them are connected by roads. The park manger needs t ...

  5. const in C/C++

    1.const 对象必须初始化,因为一旦创建后值不能改变. Eg: const int i = GetSize(); //正确:运行时初始化 const int j = 42;   //正确:编译时初 ...

  6. BZOJ3930 [CQOI2015]选数【莫比乌斯反演】

    Description 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次最大公 ...

  7. Atocder ARC082 F-Sandglass 【思维题】*

    Atocder ARC082 F-Sandglass Problem Statement We have a sandglass consisting of two bulbs, bulb A and ...

  8. BZOJ2763 JLOI2011 飞行路线 【最短路+DP】

    BZOJ2763 JLOI2011 飞行路线 Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n ...

  9. 开始学习jQuery

    一 jQuery是什么? 1. jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. 2.jQuery是继prototype之后又一个 ...

  10. pandas 的Series 里经常会出现DatetimeIndex这个类

    DatetimeIndex 的操作还是值得研究一下的. 参考其用法, http://pandas.pydata.org/pandas-docs/stable/generated/pandas.Date ...