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

随机推荐

vue_ form表单 v-model
插值两种方式:{{}},v-model v-model 可以用 v-model 指令在只能在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件 ...
关于pycharm的激活码
http://kadara.ru:1017 http://roothat.ru:1017 http://jetbrains.tencent.clickn http://idea.imsxm.com/ ...
Office for Mac
前情真的用不惯Mac上的pages,所以就找Mac版的office.找了一个发觉不对,安装总是出错,当时也没有太大的需求,就把这事搁置了下来.今天要写技术文档的时候才终于下决心要把office下再下 ...
CFE Bootloader详解 — 引导过程
CFE命令 CFE引导过程系统加电后,CFE从boot.S (src/shared/boot.S)开始执行,完成判断芯片类型.设置时钟.初始化缓存.把自身加载进RAM等任务后,跳转到c_main() ...
MPI 学习
一.编译MPI mpic++ test.cc -o test 二.启动MPI mpiexec -np 10 ./test 三.几个例子第一个进程向第二个发一个数,第二个进程向第三个进程发送一个数.. ...
在mac os x 下升级emacs
大概是09年的时候接触到emacs这个编辑器,当时我们c语言老师用的,他自信满满,而那时我是个vimer,所以每次看他按那么多组合键我就替他感觉手指头累啊. 再后来我用了几年vim写代码,再后来用了许 ...
页面提交 string数组和list对象集合举例
ajax表单提交 $.ajax({ cache: true, type: "POST", ...
每天一个linux命令：【转载】more命令
more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...
Python学习-使用Python爬取陈奕迅新歌《我们》网易云热门评论
<后来的我们>上映也有好几天了,一直没有去看,前几天还爆出退票的事件,电影的主题曲由陈奕迅所唱,特地找了主题曲<我们>的MV看了一遍,还是那个感觉.那天偶然间看到Python中 ...
scrapy模拟浏览器爬取验证码页面
使用selenium模块爬取验证码页面,selenium模块需要另外安装这里不讲环境的配置,我有一篇博客有专门讲ubuntn下安装和配置模拟浏览器的开发 spider的代码 # -*- coding: ...