DOM笔录

文档对象模型（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笔录的更多相关文章

python之路-笔录3[BOM&DOM&JQuery]
*** 目录 *** 1. BOM 学习 2. DOM 学习 3. jQuery 学习 *** END *** 1. BOM BOM(Browser Object Model)是指浏览器对象模型,它使 ...
关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素二.修改DOM引起的重绘重排一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
HTML DOM 介绍
本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...
HTML DOM 对象
本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...
重撸js_2_基础dom操作
1.node 方法返回含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...
虚拟dom与diff算法分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析全面理解虚拟DOM,实现虚拟DOM

随机推荐

C# 加密狗超级狗加密程序程序授权示例程序授权验证
本篇针对超级狗进行讲解,对应的超级狗套件的工具包版本为2.4版本.超级狗图片如下: 主要包含两个狗,一个是超级狗,一个是开发狗,在本博文中都是必须的.首先先安装光盘中的开发套间. 接下来就开始演示一个 ...
IOS开发 arc与非Arc代码的区别
是属于ios开发中的内存管理问题:在这我简要概述一下,详细讲的话内容挺多,而且是作为一个ios开发人员,或ios开发爱好者,这是必须了解的:Objective-c中提供了两种内存管理机制MRC(Man ...
linux前奏
1:选典型 2:选稍后自定义安装系统 3: 4: :5:弹出清单二:装系统下载linux的网址:https://mirrors.aliyun.com/centos/ 1: 2: 3: 2:如何修改 ...
DevExpress相关控件中非字符数值居左显示
用了这么长时间的DevExpress控件,今天遇到俩问题. 一个是从头到尾看了一遍编译成功的例子,只能感慨,功能太丰富了,自己所用的不过是冰山一角.有些自己一直想实现的效果,原来早就有现成的可用,汗颜 ...
今天需要做手机端访问的页面，所以把meta的整理一下。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale= ...
VC dimension and Model complexity
可以把growth function m_H(N)的upper bound用N^(k-1)来限制, for N large, k>=3 Thus, 定义: VC Dimension: maxim ...
[转]RC4加密已不再安全，破解效率极高
原文链接:http://freebuf.com/news/72622.html 原文发表时间:2015.7.17 安全研究人员称,现在世界上近三分之一的HTTPS加密连接可被破解,并且效率极高.这种针 ...
flash 一直在最上方，z-index无效
设置embed的透明度 wmode="transparent" <embed src="http://player.youku.com/player.php/sid ...
spring mvc框架web.xml配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
《DSP using MATLAB》示例 Example 9.4
代码: %% ------------------------------------------------------------------------ %% Output Info about ...