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

随机推荐

一张图说明HTTPS 握手过程
数据链路层、ARP/RARP、ICMP、ping和traceroute
互联网基础: 数据链路层:RFC文档:894/1042/1340 为IP模块发送和接受IP数据报为ARP模块发送ARP请求和接收ARP应答为RARP模块发送RARP请求和接收RARP应答 ...
iOS调用第三方API／Framework
前言老板不止一次地说过:这个世纪靠个人的能力去完成一件事情肯定是不够的.无论什么方面我们都可以找到许许多多的事例表明合作共赢的重要性,例如Linux的发展.建筑事务所的发展.乃至科学技术的发展等等. ...
silverlight——多次异步调用的顺序执行
遇到这样一个功能需求,对于后台的同一个服务调用多次,但要求传入的参数能够再一个执行完之后再进行另一个参数的执行. 由于silverlight支持的是异步调用机制,故无法控制服务调用何时返回.那么如果使 ...
ASP.NET WebForm 与 IE10、IE11
最近维护公司一个烂项目.NET4.0 Asp.Net WebForm(在MVC5泛滥的今天还有用WebForm的(⊙o⊙)…) IE10.IE11下aspx中大表单提交不上去,报_DoPostBack ...
利用ajax完成项目图册上传删除【实际项目】
[项目页面效果] [前台jsp页面] jsp的js代码 <script type="text/javascript"> //上传项目图片 function upload ...
【EF】EntityFramework 更新数据库字段的三种方法
实体类 public class TestDbContext : DbContext { public DbSet<Test> Tests { get; set; } public Tes ...
转载——关于bp神经网络
一.BP神经网络的概念 BP神经网络是一种多层的前馈神经网络,其主要的特点是:信号是前向传播的,而误差是反向传播的.具体来说,对于如下的只含一个隐层的神经网络模型: (三层BP神经网络模型) ...
gradle 构建包含源码配置
参考配置: apply plugin: "idea" apply plugin: "groovy" apply plugin: "eclipse&qu ...
让nodejs 支持 es6 import
备注: 尽管nodejs 新版本已经支持es6 的好多特性了,但是还是有部分不支持,为了使用,实际上我们有一个比较强大工具 bable,下面介绍几个比较简单的用法. 1. bable-cli ...