DOM编程

一、DOM简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

可以将每个HTML标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

选择器：

document.getElementById('id')

document.getElementsByName('name')

document.getElementsByTagName('tagname')

实例演示一、修改单个标签中的文本内容。

<code><</code><code>p</code><code>>hello aaaaaa</</code><code>p</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code>var name1 = document.getElementById('n1');</code>

<code>name1.innerText = 'tuchao';</code>

<code></</code><code>script</code><code>></code>

实例演示二、通过标签name修改多个标签的内容

<code><</code><code>div</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>heheheheeeeeee</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code><</code><code>div</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>bbabababbabab</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code>var name2 = document.getElementsByName('n2');</code>

<code>name2[0].innerText = 'tuchao';</code>

<code>name2[1].innerText = 'tuchao';</code>

页面效果：

实例演示三、通过标签tag修改多个标签的内容

<code>var name3 = document.getElementsByTagName('div');</code>

<code> </code><code>name3[item].innerText = 'elephant'</code>

常用函数：

创建标签

document.createElement('a')

获取或者修改样式

obj.className

获取或设置属性

setattribute(key,val) getattribute(key)

获取或修改样式中的属性

obj.style.属性

提交表单

document.geElementById('form_id').submit()

实例演示四、在标签中加入内容

<code>var tag = document.createElement("a");</code>

<code>tag.innerText = '点希望';</code>

<code>var id1 = document.getElementById('n1');</code>

<code>id1.appendChild(tag);</code>

实例演示五、标签替换

<code>var tag = "<</code><code>a</code> <code>href</code><code>=</code><code>'http://www.baidu.com'</code><code>>百度一下</</code><code>a</code><code>>"</code>

<code>id1.innerHTML = tag;</code>

页面效果会显示原id="n1"的div标签消失了，替换成了自定义的超链接标签。

实例演示六、修改标签的Class

<code> </code><code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>charset</code><code>=</code><code>"UTF-8"</code> <code>content</code><code>=</code><code>"text/html"</code><code>></code>

<code> </code><code><</code><code>title</code><code>>js_st1</</code><code>title</code><code>></code>

<code> </code><code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code> </code><code>.hide {display: none;}</code>

<code> </code><code>.n22 {color:red;}</code>

<code> </code><code></</code><code>style</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"n22"</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>heheheheeeeeee</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code> </code><code><</code><code>div</code> <code>name</code><code>=</code><code>"n2"</code><code>> <</code><code>p</code><code>>bbabababbabab</</code><code>p</code><code>></</code><code>div</code><code>></code>

<code>var id2 = document.getElementsByName('n2');</code>

<code>id2[0].className = 'hide'</code>

<code></</code><code>script</code><code>> </code>

此时第一个div在页面中将不会显示了

实例演示七、修改标签的name值

<code>var id3 = document.getElementById('n3');</code>

<code>console.log(id3.getAttribute('name'));</code>

<code>id3.setAttribute('name','cow');</code>

实例演示八、修改标签样式

<code><</code><code>div</code> <code>style</code><code>=</code><code>"width:500px; height:300px; border:solid black 1px"</code> <code>id</code><code>=</code><code>"n3"</code> <code>name</code><code>=</code><code>"dog"</code><code>> </</code><code>div</code><code>></code>

<code>var w = id3.style.width;</code>

<code>console.log(w);</code>

<code>id3.style.width = '200px'</code>

页面效果：修改前

页面效果：修改后

常用事件：

实例演示九、创建按钮点击事件

<code><</code><code>form</code> <code>id</code><code>=</code><code>"F1"</code> <code>action</code><code>=</code><code>'https://www.baidu.com/s?'</code> <code>method</code><code>=</code><code>"GET"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'text'</code> <code>name</code><code>=</code><code>'wd'</code> <code>/></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'button'</code> <code>value</code><code>=</code><code>'按钮提交'</code> <code>onclick</code><code>=</code><code>'Foo();'</code> <code>/></code>

<code>function Foo (){</code>

<code> </code><code>document.getElementById('F1').submit()</code>

常用方法：

定义一个函数每隔一定的时间自动执行一次，括号中左边写执行的函数名逗号分割，右边写间隔的时长单位为毫秒。

setInterval('Foo()',20)

用于停止setInterval的循环执行，这个函数括号中接受的参数为setInterval函数返回的值。

clearInterval(interval)

定义一个函数间隔一定的时间自动执行，与setInterval函数不同的是这个方法只让函数执行一次。

setTimeout('Go()',10000)

用于取消setTimeout函数的执行，函数接受的参数是setTimeout函数返回的值。

clearTimeout()

搜索框实例

<code> </code><code><</code><code>title</code><code>>搜索框实例</</code><code>title</code><code>></code>

<code> </code><code>.gray{color: gray;</code>

<code> </code><code>height: 30px;</code>

<code> </code><code>width: 220px;</code>

<code> </code><code>.black{</code>

<code> </code><code>color: black;</code>

<code> </code><code>height: 30px;</code>

<code> </code><code>width: 220px;</code>

<code><</code><code>input</code> <code>type</code><code>=</code><code>'text'</code> <code>class</code><code>=</code><code>'gray'</code> <code>id</code><code>=</code><code>'tip'</code> <code>value</code><code>=</code><code>'请输入关键词'</code> <code>onfocus</code><code>=</code><code>'Enter();'</code> <code>onblur</code><code>=</code><code>'Leave();'</code> <code>/></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>function Enter(){</code>

<code> </code><code>var id = document.getElementById('tip');</code>

<code> </code><code>id.className = 'black'</code>

<code> </code><code>if(id.value=='请输入关键词' || id.value.trim()==''){</code>

<code> </code><code>id.value = ''</code>

<code> </code><code>function Leave(){</code>

<code> </code><code>id.value='请输入关键词'</code>

<code> </code><code>id.className='gray'</code>

<code> </code><code>id.className='black'</code>

<code> </code><code></</code><code>script</code><code>></code>

跑马灯实例

<code> </code><code><</code><code>title</code><code>>跑马灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</</code><code>title</code><code>></code>

<code> </code><code>function Go(){</code>

<code> </code><code>var content = document.title;</code>

<code> </code><code>var firstChar = content.charAt(0)</code>

<code> </code><code>var sub = content.substring(1,content.length)</code>

<code> </code><code>document.title = sub + firstChar;</code>

<code>setInterval('Go()',1000);</code>

进度条实例

<code> </code><code><</code><code>div</code> <code>style</code><code>=</code><code>"width:1000px;background-color:gray"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>'jindu'</code> <code>style</code><code>=</code><code>"width:10%;background-color:red;height:20px;"</code><code>></</code><code>div</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'button'</code> <code>value</code><code>=</code><code>'点击停止'</code> <code>onclick</code><code>=</code><code>'Stop();'</code> <code>/></code>

<code>function Foo(){</code>

<code> </code><code>var id = document.getElementById('jindu');</code>

<code> </code><code>clearInterval(interval)</code>

<code> </code><code>id.style.width = pro+'%';</code>

<code>interval = setInterval('Foo()',20)</code>

<code>function Stop(){</code>

<code> </code><code>clearInterval(interval)</code>

本文转自qw87112 51CTO博客，原文链接:http://blog.51cto.com/tchuairen/1742721

DOM编程

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条