#Vue 慕课视频+Vue2.0官方文档 知识点总结
vue初步了解
var app = new Vue({
el: '#app', //处理的DOM的范围
data: {
con: 'hello world'
}
})
在实例中添加方法，只要数据变化了，页面中的显示就会跟着变化，$data/$el都是vue的实例属性或者方法；
setTimeout(() => {
app.$data.content = 'bye world '
}, 2000);
vue实现TodoList:MVVM模式
v-model 作用：input 里面的value值和vue实例中的inputValue进行了双向的数据绑定
<div id="app">
<input type="text" v-model='inputValue'>
<button v-on:click='handleBtnClick'>提交</button>
<ul>
<li v-for='item in list'> </li>
</ul>
</div>
var app = new Vue({
el : '#app',
data : {
list : [],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
}
})
前端组件化：全局组件和局部组件
全局组件
// 全局组件，名称叫做TodoItem，内容是li标签；使用的时候，TodoItem 等价于 todo-item 来使用
Vue.component('TodoItem',{
template:'<li>hello world</li>'
})
局部组件
// 局部组件,不能直接使用，需要注册到下面的应用实例里面
var TodoItem = {
template:'<li>hello world</li>',
}
//在vue实例中注册conponent
var app = new Vue({
el : '#app',
components:{
TodoItem,
}})
前端组件化：简单的组件间传值
实现todolist的简单功能，单击添加的内容，进行删除
- 子组件向父组件传值：
- 在子组件的模板
template中添加监听事件v-on/@，同时在子组件中定义绑定的事件 - 子组件中的数据是由
v-bind/:绑定的父组件中的data决定的，所以需要子组件绑定向外触发的事件，改变父组件中的值$emit()
- 在子组件的模板
- 父组件向子组件传值：
v-bind/:方式进行数据传递，同时子组件props要进行接收
<div id="app">
<!--v-model实现数据的双向绑定-->
<input type="text" v-model='inputValue'>
<!--点击提交按钮触发父组件中methods的handleBtnClick事件-->
<button v-on:click='handleBtnClick'>提交</button>
<ul>
<!--delete是绑定在这个标签上面的事件，这里用于子组件触发删除事件-->
<todo-item :content='item'
:index='index'
v-for='(item,index) in list'
@delete='handleItemDelete'>
</todo-item>
</ul>
</div>
var TodoItem = {
// 子组件传值，在DOM中绑定的内容可以用子组件中的props接收
props:['content','index'],
// 定义子组件的内容，同时绑定点击事件，在标签中显示绑定数据content的内容
template:'<li @click="handleItemClick"><!-- Image to hack wechat -->
<!-- <img src="/img/icon_wechat.png" width="0" height="0"> -->
<!-- <img src="/img/home.jpg" width="0" height="0"> -->
<!-- Post Header -->
<style type="text/css">
header.intro-header{
position: relative;
background-image: url('/img/home.jpg')
}
</style>
<header class="intro-header" >
<div class="header-mask"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<div class="tags">
<a class="tag" href="/tags/#< JS原生基础相关 >" title="< JS原生基础相关 >">< JS原生基础相关 ></a>
</div>
<h1>DOM相关知识点整理1</h1>
<h2 class="subheading"></h2>
<span class="meta">Posted by CodingWithAlice on June 23, 2019</span>
</div>
</div>
</div>
</div>
</header>
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<!-- Post Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
post-container">
<h3 id="本文概要如下">本文概要如下：</h3>
<ul>
<li>
<p><strong>DOM树</strong>：把html页面或者是xml文件看成是一个文档，文档就是一个对象，这个文档中所有的标签都是元素，元素也可以看成是对象/标签(元素，对象)有很多，还有嵌套的关系，组成的这种层次结构，可以模拟成树形结构图，简称：树状图，就是DOM树。</p>
</li>
<li>
<p><strong>DOM对象</strong>：通过DOM方式获取的元素得到的对象</p>
</li>
<li>
<p><strong>获取元素多种方式</strong>：</p>
</li>
</ul>
<ol>
<li>
<p>根据 <strong>id属性</strong> 的值获取元素，返回来的是<strong>一个元素对象</strong>；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementById("id属性的值");</code></p>
</li>
<li>
<p>根据 <strong>标签名字</strong> 获取元素，返回来的是一个<strong>伪数组</strong>，返回具有指定标签名的元素子元素集合；<code class="language-plaintext highlighter-rouge">document.getElementsByTagName("标签名字");</code></p>
<p><strong>下面的几个,有的浏览器不支持(ie8)</strong></p>
</li>
<li>
<p>根据 <strong>name属性</strong> 的值获取元素,返回来的是一个<strong>伪数组</strong>,里面保存了多个的DOM对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementsByName("name属性的值")</code></p>
</li>
<li>
<p>根据 <strong>类样式</strong> 的名字来获取元素，返回来的是一个<strong>伪数组</strong>，里面保存了多个的DOM对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementsByClassName("类样式的名字")</code></p>
</li>
<li>
<p>根据 <strong>选择器</strong> 获取元素，返回来的是<strong>一个元素对象</strong>，文档中匹配到指定的元素的第一个对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.querySelector("选择器的名字#btn"); </code></p>
</li>
<li>
<p>根据 <strong>选择器</strong> 获取元素，返回来的是一个<strong>伪数组</strong>，文档中匹配到指定的元素的对象集合；</p>
<p><code class="language-plaintext highlighter-rouge">document.querySelectorAll("选择器的名字.cls") </code></p>
</li>
</ol>
<ul>
<li>获取boby、title、html标签</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">;</span> <span class="c1">//获取的是元素--标签</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span> <span class="c1">//标签中的值</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">;</span><span class="c1">//获取根元素html</span>
</code></pre></div></div>
<ul>
<li>操作<strong>基本标签</strong>的属性
<ul>
<li><code class="language-plaintext highlighter-rouge">src,title,alt,href,id</code>属性</li>
</ul>
</li>
<li>操作<strong>表单标签</strong>的属性吧
<ul>
<li><code class="language-plaintext highlighter-rouge">name,value,type,checked,selected,disabled,readonly</code></li>
</ul>
</li>
<li>元素的<strong>样式操作</strong>
<ul>
<li><code class="language-plaintext highlighter-rouge">对象.style.属性=值;</code></li>
<li><code class="language-plaintext highlighter-rouge">对象.className=值;</code></li>
</ul>
</li>
</ul>
<p>为元素添加事件的操作：有<strong>事件源，触发和响应</strong>；</p>
<p>例如：按钮被点击,弹出对话框
其中：按钮—->事件源
点击—->事件名字
被点了—>触发了
弹框了—>响应</p>
<hr />
<p>接下来是详细分析介绍：</p>
<h4 id="dom经常进行的操作"><strong>DOM经常进行的操作</strong>：</h4>
<p> • 获取元素
• 动态创建元素
• 对元素进行操作(设置其属性或调用其方法)
• 事件(什么时机做相应的操作)
<!--html代码中嵌入了js的代码,不方便后期的修改和维护--></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"弹框"</span> <span class="na">onclick=</span><span class="s">"alert('哈哈,我又变帅了')"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>等价于</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">哈哈,我又变帅了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">};</span>
</code></pre></div></div>
<p>等价于</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">btnObj</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">这是分成两行代码的方式</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<ul>
<li>
<p>HTML：展示信息，<strong>展示数据</strong>的</p>
</li>
<li>
<p>XML：侧重于<strong>存储数据</strong></p>
</li>
<li>
<p><strong>根元素:html标签</strong></p>
<ul>
<li><strong>元素(element)</strong>：页面中的所有的标签都是元素，元素可以看成是对象</li>
</ul>
</li>
<li><strong>文档 document</strong>：一个网页可以称为文档；<strong>页面中的顶级对象</strong>；</li>
<li><strong>节点 Node</strong>：网页中的<strong>所有内容都是节点</strong>（标签、属性、文本[文字、换行、空格、回车]、注释等）</li>
<li><strong>节点的属性</strong>：标签的属性；作用：为了将来<strong>获取很多节点</strong>，得到节点中的标签（元素），识别节点中的标签元素</li>
</ul>
<p><img src="/../img/assets_2019/dom1.png" style="zoom:65%;" /></p>
<ul>
<li>点击事件：如下以案例举例出现的情况以及其功能</li>
</ul>
<h5 id="案例1点击按钮显示图片点击按钮的时候设置img标签的src属性有一个图片的路径"><strong>案例1：点击按钮显示图片</strong>：点击按钮的时候设置img标签的src属性有一个图片的路径</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示图片"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">""</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"im"</span> <span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//为按钮注册点击事件,添加事件处理函数</span>
<span class="nx">btnObj</span><span class="p">.</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">imObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">im</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="dl">"</span><span class="s2">images/liuyan.jpg</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">width</span><span class="o">=</span><span class="dl">"</span><span class="s2">300</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">height</span><span class="o">=</span><span class="dl">"</span><span class="s2">400</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例2点击按钮修改p标签的显示内容"><strong>案例2：点击按钮，修改p标签的显示内容</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"设置p的内容"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"p1"</span><span class="nt">></span>我是一个p标签<span class="nt"></p></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//根据id获取按钮,为按钮注册点击事件,添加事件处理函数</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//根据id获取p标签,设置内容</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">p1</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span><span class="o">=</span><span class="dl">"</span><span class="s2">这是一个p</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧1">注意技巧1：</h5>
<p>凡是<strong>成对的标签</strong>,中间的<strong>文本内容</strong>,设置的时候,都使用 <strong>innerText</strong> 这个属性的方式；</p>
<h5 id="案例3点击按钮修改a标签的地址和热点文字"><strong>案例3：点击按钮修改a标签的地址和热点文字</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"ak"</span> <span class="na">href=</span><span class="s">"https://www.jiumodiary.com/"</span><span class="nt">></span>鸠摩搜书<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//注册点击事件,添加事件处理函数</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//设置href属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://codingwithalice.github.io/</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//设置文字内容</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<p>可对javascript代码进行<strong>优化</strong>：</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//上面的代码，获取了两次id为ak的元素，增加了浏览器的负担。</span>
<span class="c1">//优化后的:</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//设置href属性，设置文字内容</span>
<span class="kd">var</span> <span class="nx">aObj</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">aObj</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://codingwithalice.github.io/</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">aObj</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例4点击按钮设置多个p标签的文字内容"><strong>案例4：点击按钮设置多个p标签的文字内容</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv1"</span><span class="nt">></span>
<span class="nt"><p></span>CtrlCoder<span class="nt"></p></span>
<span class="nt"><p></span>CtrlCoder<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv2"</span><span class="nt">></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//根据标签名字获取标签,返回的是一个伪数组</span>
<span class="kd">var</span> <span class="nx">pObjs</span><span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//循环遍历这个数组</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">pObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">//每个p标签,设置文字</span>
<span class="nx">pObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerText</span><span class="o">=</span><span class="dl">"</span><span class="s2">我们都是p</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例5点击按钮改变图片的alt和titile"><strong>案例5：点击按钮改变图片的alt和titile</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/cangjingkong.jpg"</span> <span class="na">alt=</span><span class="s">"CtrlCoder"</span> <span class="na">title=</span><span class="s">"CodingWithAlice"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//没有给img id名称，可以用tagname获取，但是一定要注意返回的是一个伪数组</span>
<span class="kd">var</span> <span class="nx">imgObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">img</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">imgObjs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">alt</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">改了</span><span class="dl">"</span><span class="p">;</span><span class="c1">//调用的时候以数组的形式调用</span>
<span class="nx">imgObjs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">title</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">实现吧</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例6点击按钮修改文本框的值"><strong>案例6：点击按钮修改文本框的值</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"修改文本框的值"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的文本框，包含了第一个type为button</span>
<span class="kd">var</span> <span class="nx">inputs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">inputs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//用该元素的type属性判断这个元素是不是按钮</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">inputs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">type</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">inputs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例7显示与隐藏"><strong>案例7：显示与隐藏</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nt">div</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkmagenta</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隐藏"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例7显示与隐藏优化一个按钮的写法"><strong>案例7：显示与隐藏优化：一个按钮的写法</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nt">div</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkmagenta</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cls</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隐藏"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//点击按钮,通过类样式的方式设置div的显示和隐藏</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//判断的是div是否应用了类样式</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//没有应用类样式，现在是显示的,应该隐藏</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//执行完上一句，就隐藏了，按钮改变</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">显示</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">//执行完上一句，就显示了，按钮改变</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">隐藏</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例8开关灯body标签背景颜色"><strong>案例8：开关灯，body标签背景颜色</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nc">.cls</span> <span class="p">{</span><span class="nl">background-color</span><span class="p">:</span> <span class="no">black</span><span class="p">;}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"开/关灯"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">className</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">""</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例9单选和多选和下拉菜单"><strong>案例9：单选和多选和下拉菜单</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//单选
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"修改性别"</span> <span class="na">id=</span><span class="s">"btn1"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"sex"</span><span class="nt">/></span>男
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">name=</span><span class="s">"sex"</span> <span class="na">id=</span><span class="s">"rad1"</span><span class="nt">/></span>女
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">name=</span><span class="s">"sex"</span><span class="nt">/></span>保密
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn1</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">rad1</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧2">注意技巧2：</h5>
<p>在表单标签中,如果<strong>属性和值只有一个</strong>，并且值是这个属性本身，那么在写js代码，DOM操作的时候，这个属性值，是<strong>布尔类型</strong>就可以了。</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//多选
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"选择兴趣"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="nt">/></span>吃饭
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="na">id=</span><span class="s">"ck1"</span> <span class="nt">/></span>睡觉
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="na">id=</span><span class="s">"ck2"</span> <span class="nt">/></span>打豆豆
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ck1</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ck2</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//下拉菜单
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"点菜"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><select</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"ss"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>油炸榴莲<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>爆炒臭豆腐<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>清蒸助教<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">id=</span><span class="s">"op1"</span><span class="nt">></span>凉拌班主任<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">></span>红烧小苏<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//点击按钮选择菜</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">op1</span><span class="dl">"</span><span class="p">).</span><span class="nx">selected</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例10改变文本域内的值">案例10：改变文本域内的值</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><textarea</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"tt"</span> <span class="na">cols=</span><span class="s">"30"</span> <span class="na">rows=</span><span class="s">"10"</span> <span class="na">readonly=</span><span class="s">"readonly"</span><span class="err">/</span><span class="na">disabled=</span><span class="s">“disabled”/readonly/disabled</span> <span class="nt">></span>
注册用户的协议:某人问智者,大师:您觉得怎么做才是最快乐的?回答说:不要和愚者辩论这个人说:我不这么认为!大师说:您说的对.
<span class="nt"></textarea></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"注册"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//推荐使用value，textarea是表单标签。</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">tt</span><span class="dl">"</span><span class="p">).</span><span class="nx">value</span><span class="o">=</span><span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//document.getElementById("tt").innerText="哈哈";</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例11点击小图保留显示大图">案例11：点击小图(保留),显示大图</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/1.jpg"</span> <span class="na">id=</span><span class="s">"ak"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/1-small.jpg"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">""</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"big"</span><span class="nt">></span> //保证小图的保留
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//点击小图,下面显示大图 //点击超链接触发事件</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">big</span><span class="dl">"</span><span class="p">).</span><span class="nx">src</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span><span class="c1">//保证小图的保留</span>
<span class="p">};</span>
</code></pre></div></div>
<p>相册操作：</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"imagegallery"</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/1.jpg"</span> <span class="na">title=</span><span class="s">"A"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/1-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"1"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/2.jpg"</span> <span class="na">title=</span><span class="s">"B"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/2-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"2"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/3.jpg"</span> <span class="na">title=</span><span class="s">"C"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/3-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"3"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/4.jpg"</span> <span class="na">title=</span><span class="s">"D"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/4-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"4"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><img</span> <span class="na">id=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"images/placeholder.png"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"450"</span><span class="nt">/></span>//点击链接a后显示大图的标签
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"des"</span><span class="nt">></span>选择一个图片<span class="nt"></p></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第一步：点击a标签,把a标签中的href的属性值给id为image的src属性</span>
<span class="c1">//第二步：把a的title属性的值给id为des的p标签赋值</span>
<span class="kd">var</span> <span class="nx">aObjs</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">imagegallery</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//循环遍历所有的a标签</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">aObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">//为每个a标签注册点击事件</span>
<span class="nx">aObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">image</span><span class="dl">"</span><span class="p">).</span><span class="nx">src</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">des</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
<span class="c1">//阻止超链接默认的跳转</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="案例12隔行变色奇红偶黄">案例12：隔行变色，奇红偶黄</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隔行变色"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"uu"</span><span class="nt">></span>
<span class="nt"><li></span>红旗<span class="nt"></li></span>
<span class="nt"><li></span>五菱宏光<span class="nt"></li></span>
<span class="nt"><li></span>奔驰<span class="nt"></li></span>
<span class="nt"><li></span>兰博基尼<span class="nt"></li></span>
<span class="nt"><li></span>哈弗<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第一种方法</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mi">2</span><span class="o">==</span><span class="mi">0</span><span class="p">){</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第二种方法：简写，善于利用三元表达式</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例13排他功能">案例13：排他功能</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">btnObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//每个事件包括两件事情</span>
<span class="nx">btnObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//第一：把所有的按钮的value值设置为默认的值:没怀孕</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="nx">btnObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">btnObjs</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">没怀孕</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//第二：当前被点击的按钮设置为:怀孕了</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">怀孕了</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="注意技巧3">注意技巧3：</h5>
<p>设置被点击按钮的时候，不能用<code class="language-plaintext highlighter-rouge">btnObjs[i].value</code> ，因为事件是在触发的时候执行的，而 for 循环是在<strong>页面加载的时候执行完毕了</strong>，触发时间的时候，<code class="language-plaintext highlighter-rouge">i=btnObjs.length</code></p>
<h5 id="案例14阻止超链接跳转">案例14：阻止超链接跳转</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/lb1.jpg"</span> <span class="na">id=</span><span class="s">'a1'</span><span class="nt">><img</span> <span class="na">src=</span><span class="s">"images/content_bg.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">'im'</span><span class="nt">></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//方法1：</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">im</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">a1</span><span class="dl">'</span><span class="p">).</span><span class="nx">href</span><span class="p">;</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span><span class="c1">//阻止链接默认跳转</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!--方法2：return flase 写在行内式中--></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.baidu.com"</span> <span class="na">onclick=</span><span class="s">"alert('哎呀,我被点了'); return false"</span><span class="nt">></span>百度<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!--方法3：注意这里哦，这里调用f1的函数，返回的是一个false，所以这里要添加一个return--></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.baidu.com"</span> <span class="na">onclick=</span><span class="s">"return f1()"</span><span class="nt">></span>百度<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">f1</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">哇塞,好漂亮哦</span><span class="dl">"</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="案例15鼠标进入onmouseover离开onmouseout改变标签的背景颜色">案例15：鼠标进入onmouseover、离开onmouseout改变标签的背景颜色</h5>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//为li注册鼠标进入事件</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseover</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">//为li注册鼠标离开事件</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseout</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//恢复到这个标签默认的颜色</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="注意技巧4">注意技巧4：</h5>
<ol>
<li>
<p><code class="language-plaintext highlighter-rouge">getElementsByTagName</code>获取的是数组，如果只使用一个，就要加序号<code class="language-plaintext highlighter-rouge">getElementsByTagName("li")[0]</code></p>
</li>
<li>
<p>设置元素的样式的方式：</p>
<p> 1. <strong>对象 ** . style . **属性 **= **值</strong>；</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>2. **对象** . className = **值**；
</code></pre></div> </div>
</li>
<li>
<p><code class="language-plaintext highlighter-rouge">对象.className=“”</code>使用的时候要注意，若只写想要设置的类名，会<strong>覆盖这个对象所有的类</strong>。</p>
</li>
</ol>
<h5 id="案例17点击按钮修改div的宽高背景颜色">案例17：点击按钮，修改div的宽、高、背景颜色</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"设置样式"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//方法一：直接修改样式 .style.属性 = 值；</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById$</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">300px</span><span class="dl">"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">pink</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//原来在css中是background-color</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c">/*方法二：通过给元素添加css样式属性 .className = 值； */</span>
<span class="nc">.cls</span> <span class="p">{</span><span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span><span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="no">red</span><span class="p">;}</span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className</span>
<span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//等价于：<div id="dv" class=“cls”/cls></div></span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧5">注意技巧5：</h5>
<p>如果在 css 中属性是<strong>多个单词</strong>（带<code class="language-plaintext highlighter-rouge">-</code>）的写法，那么在js代码中DOM操作的时候，要用<strong>驼峰命名法</strong>来调用</p>
<h5 id="案例18获取焦点onfocus失去焦点事件onblur">案例18：获取焦点onfocus，失去焦点事件onblur</h5>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">txt</span><span class="dl">"</span><span class="p">).</span><span class="nx">onfocus</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//判断文本框的内容是不是默认的内容</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">==</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span><span class="c1">//清空文本框</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">black</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">txt</span><span class="dl">"</span><span class="p">).</span><span class="nx">onblur</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//1.判断字符串方式</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">==</span> <span class="dl">""</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">gray</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//2.判断字符串长度方式，更推荐这种，数字判断的运行效率高</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">gray</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧6">注意技巧6：</h5>
<ol>
<li>如果这个属性在浏览器中不支持，那么这个属性的类型是<code class="language-plaintext highlighter-rouge">undefined</code>。</li>
</ol>
<h5 id="案例19自定义属性">案例19：自定义属性</h5>
<ol>
<li>设置自定义属性：<code class="language-plaintext highlighter-rouge">setAttribute("属性的名字","属性的值");</code></li>
<li>获取自定义属性的值：<code class="language-plaintext highlighter-rouge">getAttribute("属性的名字");</code></li>
<li>移除义属性：<code class="language-plaintext highlighter-rouge">removeAttribute("属性的名字");</code></li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"uu"</span><span class="nt">></span>
<span class="nt"><li></span>数学成绩<span class="nt"></li></span>
<span class="nt"><li></span>英语成绩<span class="nt"></li></span>
<span class="nt"><li></span>语文成绩<span class="nt"></li></span>
<span class="nt"><li></span>科学成绩<span class="nt"></li></span>
<span class="nt"><li></span>历史成绩<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">list</span><span class="o">=</span><span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span><span class="c1">//根据id获取ul标签,并且或者该标签中所有的li</span>
<span class="c1">//为每个li添加自定义属性</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span><span class="c1">//循环遍历</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">,(</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span><span class="o">*</span><span class="mi">10</span><span class="p">);</span><span class="c1">//添加在DOM对象上,不在标签中</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span><span class="c1">//点击每个li标签,获取对应的自定义属性值</span>
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">));</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">//移除自定义属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">);</span><span class="c1">//移除自定义属性，没值也没属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">""</span><span class="p">;</span><span class="c1">//移除元素的类样式，值没有了,但是属性还是有的 </span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">class</span><span class="dl">"</span><span class="p">);</span><span class="c1">//移除自定义属性，没值也没属性</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例20获取标签的内容">案例20：获取标签的内容</h5>
<table>
<thead>
<tr>
<th style="text-align: left">分类</th>
<th style="text-align: center">名称</th>
<th style="text-align: left">说明</th>
<th>使用时的区别</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">innerHTML</code></td>
<td style="text-align: left">设置或返回元素开始和结束标签之间的 HTML</td>
<td>保持编写的格式、样式标签<></td>
</tr>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">innerText</code></td>
<td style="text-align: left">设置或返回元素中去除所有标签的内容</td>
<td>去掉所有格式以及标签的纯文本内容</td>
</tr>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">textContent </code></td>
<td style="text-align: left">设置或返回指定节点的文本内容</td>
<td>去掉标签后，保留文本样式，有回车</td>
</tr>
<tr>
<td style="text-align: left">方法</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">document.write()</code></td>
<td style="text-align: left">向文档写入指定的内容</td>
<td> </td>
</tr>
<tr>
<td style="text-align: left">方法</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">document.writeln() </code></td>
<td style="text-align: left">向文档写入指定的内容并换行</td>
<td> </td>
</tr>
</tbody>
</table>
<hr style="visibility: hidden;">
<ul class="pager">
<li class="previous">
<a href="/2019/06/21/%E9%9A%8F%E6%9C%BA%E7%BB%99%E4%B8%80%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E7%9A%84%E9%A2%9C%E8%89%B2/" data-toggle="tooltip" data-placement="top" title="随机给一个盒子添加一个十六进制的颜色">
Previous<br>
<span>随机给一个盒子添加一个十六进制的颜色</span>
</a>
</li>
<li class="next">
<a href="/2019/06/25/Vue2.0%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3-%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-1/" data-toggle="tooltip" data-placement="top" title="Vue2.0官方文档 知识点总结1">
Next<br>
<span>Vue2.0官方文档 知识点总结1</span>
</a>
</li>
</ul>
<!--Gitalk评论start -->
<!-- Gitalk end -->
</div>
<!-- Side Catalog Container -->
<div class="
col-lg-2 col-lg-offset-0
visible-lg-block
sidebar-container
catalog-container">
<div class="side-catalog">
<hr class="hidden-sm hidden-xs">
<h5>
<a class="catalog-toggle" href="#">CATALOG</a>
</h5>
<ul class="catalog-body"></ul>
</div>
</div>
<!-- Sidebar Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
sidebar-container">
<!-- Featured Tags -->
<section>
<hr class="hidden-sm hidden-xs">
<h5><a href="/tags/">FEATURED TAGS</a></h5>
<div class="tags">
<a href="/tags/#《JavaScript高级程序设计4》" title="《JavaScript高级程序设计4》" rel="13">
《JavaScript高级程序设计4》
</a>
<a href="/tags/#< LTN3 >" title="< LTN3 >" rel="19">
< LTN3 >
</a>
<a href="/tags/#< LTN2 >" title="< LTN2 >" rel="22">
< LTN2 >
</a>
<a href="/tags/#< JS原生基础相关 >" title="< JS原生基础相关 >" rel="15">
< JS原生基础相关 >
</a>
<a href="/tags/#< 算法题 >" title="< 算法题 >" rel="40">
< 算法题 >
</a>
<a href="/tags/#< vue相关知识点 >" title="< vue相关知识点 >" rel="9">
< vue相关知识点 >
</a>
<a href="/tags/#< CSS相关内容 >" title="< CSS相关内容 >" rel="27">
< CSS相关内容 >
</a>
<a href="/tags/#< HTTP相关 >" title="< HTTP相关 >" rel="34">
< HTTP相关 >
</a>
<a href="/tags/#< 面试题整理 >" title="< 面试题整理 >" rel="6">
< 面试题整理 >
</a>
<a href="/tags/#< LTN1 >" title="< LTN1 >" rel="12">
< LTN1 >
</a>
<a href="/tags/#< 工作经验沉淀 >" title="< 工作经验沉淀 >" rel="24">
< 工作经验沉淀 >
</a>
<a href="/tags/#< 小程序 >" title="< 小程序 >" rel="5">
< 小程序 >
</a>
<a href="/tags/#< webpack >" title="< webpack >" rel="5">
< webpack >
</a>
<a href="/tags/#< 工程化 >" title="< 工程化 >" rel="2">
< 工程化 >
</a>
<a href="/tags/#< 浏览器原理 >" title="< 浏览器原理 >" rel="39">
< 浏览器原理 >
</a>
<a href="/tags/#< 重构2 >" title="< 重构2 >" rel="5">
< 重构2 >
</a>
<a href="/tags/#< React17+TS4 >" title="< React17+TS4 >" rel="9">
< React17+TS4 >
</a>
</div>
</section>
<!-- Friends Blog -->
<hr>
<h5>FRIENDS</h5>
<ul class="list-inline">
<li><a href="https://juejin.im/">掘金</a></li>
<li><a href="https://segmentfault.com/">SegmentFault</a></li>
<li><a href="https://www.v2ex.com/">V2EX</a></li>
<li><a href="https://readhub.cn/">Readhub</a></li>
<li><a href="https://www.oschina.net/">OSCHINA</a></li>
<li><a href="https://toutiao.io/posts/hot/7">开发者头条</a></li>
</ul>
</div>
</div>
</div>
</article>
<!-- async load function -->
<script>
function async(u, c) {
var d = document, t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = u;
if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
s.parentNode.insertBefore(o, s);
}
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
anchors.options = {
visible: 'always',
placement: 'right',
icon: '#'
};
anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
})
</script>
<style>
/* place left on bigger screen */
@media all and (min-width: 800px) {
.anchorjs-link{
position: absolute;
left: -0.75em;
font-size: 1.1em;
margin-top : -0.1em;
}
}
</style>
</li>',
methods:{
// 定义点击的时候向外触发一个delete事件，同时传入数组下标
handleItemClick:function(){
this.$emit('delete',this.index)//向外触发一个事件
}
}
}
var app = new Vue({
// 定义这个Vue实例场控的范围
el : '#app',
// 局部变量声明之后要在父组件中添加声明，才能使用
components:{
TodoItem,
},
data : {
list : [],
inputValue:''
},
methods:{
//定义的是绑定在input上面的点击事件，每提交一次都会触发在list中添加用户输入的内容，添加过后清空输入框，使用的是v-model这个进行数据的双向绑定
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleItemDelete:function(index){
this.list.splice(index,1)
}
}
})
vue实例的生命周期
Vue的生命周期就是Vue实例在某一个时间点会自动执行的函数。
Vue的生命周期函数并不会放在methods里面进行定义，而是直接放在实例对象里面就可以了
var vm = new Vue({
el:'#app',
data:{
test:'hello world'
},
template:'<div> </div>',
beforeCreate:function(){
console.log('beforeCreate')
},
created:function(){
console.log('created')
},
beforeMount:function(){// 渲染前
console.log(this.$el);//没有输出内容
console.log('beforeMount');
},
mounted:function(){// 渲染后
console.log(this.$el);
//可以输出<div>'hello world'</div>
console.log('mounted');
},
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:function(){
console.log('destroy')
},
// 数据改变之前
beforeUpdate:function(){
console.log('beforeUpate')
},
// 数据改变渲染之后
updated:function(){
console.log('updated')
}
})
vue的模板语法
- 第一种：插值表达式 ``；
- 第二种：
v-text将标签中innerTxet的内容变成表达式代表的data中的内容，若有标签，会进行转义后输出； - 第三种 ：
v-html除了可以正常显示内容以外，遇到标签还会进行解析 。 - 还有很多，例如
v-on/@、v-bind/:等
<div v-text='name + "Lee"'></div>
<div v-html='name + "Lee"'></div>
总结：这三种有什么不同呢?
- 共同点：都可以添加写
js表达式"Lee"； - 区别：
- 插值表达式和
v-text功能是一样的，不会解析标签； v-html是可以解析标签的
- 插值表达式和
注意，当vue指令后面跟了一个值的时候，这个值就不再是字符串了 ，而是一个js表达式；
计算属性和侦听器
第一种方法：计算属性computed
-
特点：内置缓存，计算属性依赖的值不变化，它就不会重新计算；
-
当依赖的值发生了变化，就会重新计算一次；
<div id="app">
</div>
var vm = new Vue({
el: "#app",
data: {
firstName: 'Dell',
lastName: 'Alice',
fullName: "Dell Alice",
},
computed: {
fullName: function () {
return this.firstName + " " + this.lastName
}
}
})
第二种：方法methods，不如计算属性好
-
缺点： 没有缓存机制，如果改变了页面中别的值，页面重新渲染一次，这个方法就执行一次；
-
在DOM结构中使用methods方法，要在方法后面加括号进行调用；
第三种：侦听器watch
- 特点：没有缓存机制
- watch 和 computed 语法对比，功能相似，但是computed的语法更加简单；
计算属性的setter和getter
取输入的值的时候，运行get方法；当设置值的时候，set执行。
<div id="app">
<!-- 在插值表达式里面,会先到data里面去找,找不到就去计算属性里面去找 -->
</div>
var vm = new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Alice'
},
// computed的特性是当它依赖的值变化的时候会进行重新计算
computed :{
fullName:{
get : function() {
return this.firstName + ' ' + this.lastName
// 写的时候不要漏写return以及this
},
set : function(value){ //value参数可以获取到外部数据
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
样式绑定
1/3：class 的对象绑定方式 :class=”{activated:isActivated}
<style>
.activated {color: red;}
</style>
<div @click='handleDivClick' :class="{activated:isActivated}">
hello world
</div>
2/3：class的数组绑定 :class=”[activated,activatedOne]”
- class可以和一个数组绑定，数组里面写的内容代表的是一个变量
- **class绑定的是数组里面的内容：class:”[activated]”显示的是activated中的内容 **。
<div @click='handleDivClick' :class="[activated, activatedOne]">
hello world
</div>
3/3：内联样式 style
1.对象绑定方式 :style=’styleObj’
<div :style='styleObj' @click='handleDivClick'>
hello world
</div>
var vm = new Vue({
el: '#app2',
data: {
styleObj: {
color: 'black'
}
},
methods: {
handleDivClick: function () {
this.styleObj.color = this.styleObj.color === "black" ? 'red' : "black";
}
}
})
2.数组绑定方式 :style=’[styleObj, {fontSize:”20px”}]’
<div id="app3">
<div :style='[styleObj, {fontSize:"20px"}]' @click='handleDivClick'>hello world</div>
</div>
注意：写内联样式的时候，需要采用驼峰，不要写font-size，要写fontSize
条件渲染 v-if v-show
通过一个 v-if 和 v-show 的指令，结合js的表达式，决定一个标签是否在页面上展示；
<div id="app1">
<div v-if='show' data-test="v-if"> </div>
<div v-show='show' data-test="v-show"> </div>
</div>
比较 v-if 和 v-show：
共同点：两者都可以控制一个模板标签是否在页面上显示；
不同点：v-if 定义的标签，只要值是false，就 不会存在于DOM结构之上；
v-show 定义的标签值是 false，仍存在DOM上，只是 display:none 了；
在具体使用的时候，会更多用到v-show，不会频繁操作DOM树，性能相对高一些 。
条件表达式更加复杂的用法
使用 v-if 和 v-else 的时候，要紧贴在一起使用，若中间有别的标签，那么页面就会报错，就无法解析。
<div id="app2">
<div v-if='show1 === "a"'>This is A</div>
<div v-else-if='show1 ==="b" '>This is B</div>
<div v-else>This is others </div>
</div>
条件渲染中key值的使用
为什么要使用key值？：因为在改变 show 后，页面进行重新渲染时，会尽量 复用 页面上的DOM，导致已经输入的用户名的 input 没有清空并继续作为邮箱的 input 使用；为某个标签添加 key 值之后，Vue会知道是 页面唯一 的元素，两个 key 值不一样，Vue就 不会尝试复用 这个标签。
<div id="app3">
<div v-if='show2' >
用户名<input key='username'/>
</div>
<div v-else>
邮箱<input key='passwaord' />
</div>
</div>
列表渲染
1/2：数组循环
-
为了提升循环显示的 性能，会 给每个循环项上加一个唯一的key值
这里不是很推荐写 inedx 值，会频繁造作 DOM 元素相对应的数据，废性能，可能会导致Vue没有办法充分复用节点，一般项目中除了内容还会返回 id，使用这个id作为标识
:key='item.id' -
当我们为数组增加内容的时候，不能使用数组的下标形式添加/改变数组 ( 这种方法虽然会改变数据，但是页面 不会响应 )
-
改变数组数据的方法
-
1、7个 数组变异方法来操作数组，才能够实现数据发生变化，页面也跟着变化这种响应式的方法：push、pop、shift、unsfhit、splice、sort、reverse
-
2、改变数组引用，直接修改引用的list，让它指向另一个数组的地址
-
3、set方法：第二个参数代表了 数组 的下标，第三个是改变的内容
// Vue.set方法[全局方法] Vue.set（vm.userInfo , 2 , "beijing"） // vm.$set方法[实例方法] vm.$set（vm.userInfo , 2, "beijing"）
-
-
-
当我们要遍历两个标签，但是又不想用 div 标签来包裹这两个标签循环的时候，可以使用 template模板占位符，在渲染的过程中 并不会真正得被渲染到页面上
<div id="app">
<template v-for='(item,index) of list' :key='item.id'>
<div>
---
</div>
<span>
</span>
</template>
</div>
2/2：除了数组，对象也可以进行循环
<div id="app1">
<div v-for='(item,key,index) of userInfo'>
-------
</div>
</div>
-
item是键值，key是键名，index是索引
-
这里直接修改键值，页面是可以做到响应的
-
但是如果是添加一个键值对，就会发现只改变了数值，页面没有进行响应式改变；
-
解决添加属性无法正常响应式变化的方法
-
1、改变指向，直接 重新赋值 userInfo这个对象的所有值
-
2、set方法
// Vue.set方法[全局方法] Vue.set（vm.userInfo , "adress" , "beijing"） // vm.$set方法[实力方法] vm.$set（vm.userInfo , "adress" , "beijing"）
-
-
is属性解决模板标签的bug情况
h5的规范里面，table 里面一定要有 tdoby，tbody 里面一定要有 tr，如果用 row 组件代替tr使用就会报错，同理还有 <ul><ol> 里面都要放<li>标签;<select>标签里面要放<option>。
- 解决方法：
<tr is='row'></tr>，相当于调用了row这个组件
<table>
<tbody>
<tr is='row'></tr> <!-- 这个时候tr 就是 row，显示的是row中模板的内容-->
</tbody>
</table>
子组件中data的定义要用返回函数
data 在 根组件里面可以直接定义，但是在子组件中定义data时，要求必须是一个函数，返回所对应的数据内容。
- 原因：子组件会被调用很多次，每一个子组件的数据之间最好没有冲突，每个子组件都有自己的数据；通过函数返回一个数据对象的目的，就是为了让 每个子组件 都 拥有一个独立的数据存储，不会出现多个子组件之间互相影响的情况。
Vue.component('row', {
template: '<tr><td><!-- Image to hack wechat -->
<!-- <img src="/img/icon_wechat.png" width="0" height="0"> -->
<!-- <img src="/img/home.jpg" width="0" height="0"> -->
<!-- Post Header -->
<style type="text/css">
header.intro-header{
position: relative;
background-image: url('/img/home.jpg')
}
</style>
<header class="intro-header" >
<div class="header-mask"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<div class="tags">
<a class="tag" href="/tags/#< JS原生基础相关 >" title="< JS原生基础相关 >">< JS原生基础相关 ></a>
</div>
<h1>DOM相关知识点整理1</h1>
<h2 class="subheading"></h2>
<span class="meta">Posted by CodingWithAlice on June 23, 2019</span>
</div>
</div>
</div>
</div>
</header>
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<!-- Post Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
post-container">
<h3 id="本文概要如下">本文概要如下：</h3>
<ul>
<li>
<p><strong>DOM树</strong>：把html页面或者是xml文件看成是一个文档，文档就是一个对象，这个文档中所有的标签都是元素，元素也可以看成是对象/标签(元素，对象)有很多，还有嵌套的关系，组成的这种层次结构，可以模拟成树形结构图，简称：树状图，就是DOM树。</p>
</li>
<li>
<p><strong>DOM对象</strong>：通过DOM方式获取的元素得到的对象</p>
</li>
<li>
<p><strong>获取元素多种方式</strong>：</p>
</li>
</ul>
<ol>
<li>
<p>根据 <strong>id属性</strong> 的值获取元素，返回来的是<strong>一个元素对象</strong>；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementById("id属性的值");</code></p>
</li>
<li>
<p>根据 <strong>标签名字</strong> 获取元素，返回来的是一个<strong>伪数组</strong>，返回具有指定标签名的元素子元素集合；<code class="language-plaintext highlighter-rouge">document.getElementsByTagName("标签名字");</code></p>
<p><strong>下面的几个,有的浏览器不支持(ie8)</strong></p>
</li>
<li>
<p>根据 <strong>name属性</strong> 的值获取元素,返回来的是一个<strong>伪数组</strong>,里面保存了多个的DOM对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementsByName("name属性的值")</code></p>
</li>
<li>
<p>根据 <strong>类样式</strong> 的名字来获取元素，返回来的是一个<strong>伪数组</strong>，里面保存了多个的DOM对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementsByClassName("类样式的名字")</code></p>
</li>
<li>
<p>根据 <strong>选择器</strong> 获取元素，返回来的是<strong>一个元素对象</strong>，文档中匹配到指定的元素的第一个对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.querySelector("选择器的名字#btn"); </code></p>
</li>
<li>
<p>根据 <strong>选择器</strong> 获取元素，返回来的是一个<strong>伪数组</strong>，文档中匹配到指定的元素的对象集合；</p>
<p><code class="language-plaintext highlighter-rouge">document.querySelectorAll("选择器的名字.cls") </code></p>
</li>
</ol>
<ul>
<li>获取boby、title、html标签</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">;</span> <span class="c1">//获取的是元素--标签</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span> <span class="c1">//标签中的值</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">;</span><span class="c1">//获取根元素html</span>
</code></pre></div></div>
<ul>
<li>操作<strong>基本标签</strong>的属性
<ul>
<li><code class="language-plaintext highlighter-rouge">src,title,alt,href,id</code>属性</li>
</ul>
</li>
<li>操作<strong>表单标签</strong>的属性吧
<ul>
<li><code class="language-plaintext highlighter-rouge">name,value,type,checked,selected,disabled,readonly</code></li>
</ul>
</li>
<li>元素的<strong>样式操作</strong>
<ul>
<li><code class="language-plaintext highlighter-rouge">对象.style.属性=值;</code></li>
<li><code class="language-plaintext highlighter-rouge">对象.className=值;</code></li>
</ul>
</li>
</ul>
<p>为元素添加事件的操作：有<strong>事件源，触发和响应</strong>；</p>
<p>例如：按钮被点击,弹出对话框
其中：按钮—->事件源
点击—->事件名字
被点了—>触发了
弹框了—>响应</p>
<hr />
<p>接下来是详细分析介绍：</p>
<h4 id="dom经常进行的操作"><strong>DOM经常进行的操作</strong>：</h4>
<p> • 获取元素
• 动态创建元素
• 对元素进行操作(设置其属性或调用其方法)
• 事件(什么时机做相应的操作)
<!--html代码中嵌入了js的代码,不方便后期的修改和维护--></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"弹框"</span> <span class="na">onclick=</span><span class="s">"alert('哈哈,我又变帅了')"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>等价于</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">哈哈,我又变帅了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">};</span>
</code></pre></div></div>
<p>等价于</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">btnObj</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">这是分成两行代码的方式</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<ul>
<li>
<p>HTML：展示信息，<strong>展示数据</strong>的</p>
</li>
<li>
<p>XML：侧重于<strong>存储数据</strong></p>
</li>
<li>
<p><strong>根元素:html标签</strong></p>
<ul>
<li><strong>元素(element)</strong>：页面中的所有的标签都是元素，元素可以看成是对象</li>
</ul>
</li>
<li><strong>文档 document</strong>：一个网页可以称为文档；<strong>页面中的顶级对象</strong>；</li>
<li><strong>节点 Node</strong>：网页中的<strong>所有内容都是节点</strong>（标签、属性、文本[文字、换行、空格、回车]、注释等）</li>
<li><strong>节点的属性</strong>：标签的属性；作用：为了将来<strong>获取很多节点</strong>，得到节点中的标签（元素），识别节点中的标签元素</li>
</ul>
<p><img src="/../img/assets_2019/dom1.png" style="zoom:65%;" /></p>
<ul>
<li>点击事件：如下以案例举例出现的情况以及其功能</li>
</ul>
<h5 id="案例1点击按钮显示图片点击按钮的时候设置img标签的src属性有一个图片的路径"><strong>案例1：点击按钮显示图片</strong>：点击按钮的时候设置img标签的src属性有一个图片的路径</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示图片"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">""</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"im"</span> <span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//为按钮注册点击事件,添加事件处理函数</span>
<span class="nx">btnObj</span><span class="p">.</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">imObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">im</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="dl">"</span><span class="s2">images/liuyan.jpg</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">width</span><span class="o">=</span><span class="dl">"</span><span class="s2">300</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">height</span><span class="o">=</span><span class="dl">"</span><span class="s2">400</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例2点击按钮修改p标签的显示内容"><strong>案例2：点击按钮，修改p标签的显示内容</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"设置p的内容"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"p1"</span><span class="nt">></span>我是一个p标签<span class="nt"></p></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//根据id获取按钮,为按钮注册点击事件,添加事件处理函数</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//根据id获取p标签,设置内容</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">p1</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span><span class="o">=</span><span class="dl">"</span><span class="s2">这是一个p</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧1">注意技巧1：</h5>
<p>凡是<strong>成对的标签</strong>,中间的<strong>文本内容</strong>,设置的时候,都使用 <strong>innerText</strong> 这个属性的方式；</p>
<h5 id="案例3点击按钮修改a标签的地址和热点文字"><strong>案例3：点击按钮修改a标签的地址和热点文字</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"ak"</span> <span class="na">href=</span><span class="s">"https://www.jiumodiary.com/"</span><span class="nt">></span>鸠摩搜书<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//注册点击事件,添加事件处理函数</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//设置href属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://codingwithalice.github.io/</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//设置文字内容</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<p>可对javascript代码进行<strong>优化</strong>：</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//上面的代码，获取了两次id为ak的元素，增加了浏览器的负担。</span>
<span class="c1">//优化后的:</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//设置href属性，设置文字内容</span>
<span class="kd">var</span> <span class="nx">aObj</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">aObj</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://codingwithalice.github.io/</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">aObj</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例4点击按钮设置多个p标签的文字内容"><strong>案例4：点击按钮设置多个p标签的文字内容</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv1"</span><span class="nt">></span>
<span class="nt"><p></span>CtrlCoder<span class="nt"></p></span>
<span class="nt"><p></span>CtrlCoder<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv2"</span><span class="nt">></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//根据标签名字获取标签,返回的是一个伪数组</span>
<span class="kd">var</span> <span class="nx">pObjs</span><span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//循环遍历这个数组</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">pObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">//每个p标签,设置文字</span>
<span class="nx">pObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerText</span><span class="o">=</span><span class="dl">"</span><span class="s2">我们都是p</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例5点击按钮改变图片的alt和titile"><strong>案例5：点击按钮改变图片的alt和titile</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/cangjingkong.jpg"</span> <span class="na">alt=</span><span class="s">"CtrlCoder"</span> <span class="na">title=</span><span class="s">"CodingWithAlice"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//没有给img id名称，可以用tagname获取，但是一定要注意返回的是一个伪数组</span>
<span class="kd">var</span> <span class="nx">imgObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">img</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">imgObjs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">alt</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">改了</span><span class="dl">"</span><span class="p">;</span><span class="c1">//调用的时候以数组的形式调用</span>
<span class="nx">imgObjs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">title</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">实现吧</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例6点击按钮修改文本框的值"><strong>案例6：点击按钮修改文本框的值</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"修改文本框的值"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的文本框，包含了第一个type为button</span>
<span class="kd">var</span> <span class="nx">inputs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">inputs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//用该元素的type属性判断这个元素是不是按钮</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">inputs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">type</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">inputs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例7显示与隐藏"><strong>案例7：显示与隐藏</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nt">div</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkmagenta</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隐藏"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例7显示与隐藏优化一个按钮的写法"><strong>案例7：显示与隐藏优化：一个按钮的写法</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nt">div</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkmagenta</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cls</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隐藏"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//点击按钮,通过类样式的方式设置div的显示和隐藏</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//判断的是div是否应用了类样式</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//没有应用类样式，现在是显示的,应该隐藏</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//执行完上一句，就隐藏了，按钮改变</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">显示</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">//执行完上一句，就显示了，按钮改变</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">隐藏</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例8开关灯body标签背景颜色"><strong>案例8：开关灯，body标签背景颜色</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nc">.cls</span> <span class="p">{</span><span class="nl">background-color</span><span class="p">:</span> <span class="no">black</span><span class="p">;}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"开/关灯"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">className</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">""</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例9单选和多选和下拉菜单"><strong>案例9：单选和多选和下拉菜单</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//单选
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"修改性别"</span> <span class="na">id=</span><span class="s">"btn1"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"sex"</span><span class="nt">/></span>男
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">name=</span><span class="s">"sex"</span> <span class="na">id=</span><span class="s">"rad1"</span><span class="nt">/></span>女
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">name=</span><span class="s">"sex"</span><span class="nt">/></span>保密
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn1</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">rad1</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧2">注意技巧2：</h5>
<p>在表单标签中,如果<strong>属性和值只有一个</strong>，并且值是这个属性本身，那么在写js代码，DOM操作的时候，这个属性值，是<strong>布尔类型</strong>就可以了。</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//多选
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"选择兴趣"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="nt">/></span>吃饭
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="na">id=</span><span class="s">"ck1"</span> <span class="nt">/></span>睡觉
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="na">id=</span><span class="s">"ck2"</span> <span class="nt">/></span>打豆豆
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ck1</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ck2</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//下拉菜单
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"点菜"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><select</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"ss"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>油炸榴莲<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>爆炒臭豆腐<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>清蒸助教<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">id=</span><span class="s">"op1"</span><span class="nt">></span>凉拌班主任<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">></span>红烧小苏<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//点击按钮选择菜</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">op1</span><span class="dl">"</span><span class="p">).</span><span class="nx">selected</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例10改变文本域内的值">案例10：改变文本域内的值</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><textarea</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"tt"</span> <span class="na">cols=</span><span class="s">"30"</span> <span class="na">rows=</span><span class="s">"10"</span> <span class="na">readonly=</span><span class="s">"readonly"</span><span class="err">/</span><span class="na">disabled=</span><span class="s">“disabled”/readonly/disabled</span> <span class="nt">></span>
注册用户的协议:某人问智者,大师:您觉得怎么做才是最快乐的?回答说:不要和愚者辩论这个人说:我不这么认为!大师说:您说的对.
<span class="nt"></textarea></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"注册"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//推荐使用value，textarea是表单标签。</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">tt</span><span class="dl">"</span><span class="p">).</span><span class="nx">value</span><span class="o">=</span><span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//document.getElementById("tt").innerText="哈哈";</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例11点击小图保留显示大图">案例11：点击小图(保留),显示大图</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/1.jpg"</span> <span class="na">id=</span><span class="s">"ak"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/1-small.jpg"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">""</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"big"</span><span class="nt">></span> //保证小图的保留
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//点击小图,下面显示大图 //点击超链接触发事件</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">big</span><span class="dl">"</span><span class="p">).</span><span class="nx">src</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span><span class="c1">//保证小图的保留</span>
<span class="p">};</span>
</code></pre></div></div>
<p>相册操作：</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"imagegallery"</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/1.jpg"</span> <span class="na">title=</span><span class="s">"A"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/1-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"1"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/2.jpg"</span> <span class="na">title=</span><span class="s">"B"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/2-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"2"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/3.jpg"</span> <span class="na">title=</span><span class="s">"C"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/3-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"3"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/4.jpg"</span> <span class="na">title=</span><span class="s">"D"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/4-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"4"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><img</span> <span class="na">id=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"images/placeholder.png"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"450"</span><span class="nt">/></span>//点击链接a后显示大图的标签
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"des"</span><span class="nt">></span>选择一个图片<span class="nt"></p></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第一步：点击a标签,把a标签中的href的属性值给id为image的src属性</span>
<span class="c1">//第二步：把a的title属性的值给id为des的p标签赋值</span>
<span class="kd">var</span> <span class="nx">aObjs</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">imagegallery</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//循环遍历所有的a标签</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">aObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">//为每个a标签注册点击事件</span>
<span class="nx">aObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">image</span><span class="dl">"</span><span class="p">).</span><span class="nx">src</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">des</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
<span class="c1">//阻止超链接默认的跳转</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="案例12隔行变色奇红偶黄">案例12：隔行变色，奇红偶黄</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隔行变色"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"uu"</span><span class="nt">></span>
<span class="nt"><li></span>红旗<span class="nt"></li></span>
<span class="nt"><li></span>五菱宏光<span class="nt"></li></span>
<span class="nt"><li></span>奔驰<span class="nt"></li></span>
<span class="nt"><li></span>兰博基尼<span class="nt"></li></span>
<span class="nt"><li></span>哈弗<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第一种方法</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mi">2</span><span class="o">==</span><span class="mi">0</span><span class="p">){</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第二种方法：简写，善于利用三元表达式</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例13排他功能">案例13：排他功能</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">btnObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//每个事件包括两件事情</span>
<span class="nx">btnObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//第一：把所有的按钮的value值设置为默认的值:没怀孕</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="nx">btnObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">btnObjs</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">没怀孕</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//第二：当前被点击的按钮设置为:怀孕了</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">怀孕了</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="注意技巧3">注意技巧3：</h5>
<p>设置被点击按钮的时候，不能用<code class="language-plaintext highlighter-rouge">btnObjs[i].value</code> ，因为事件是在触发的时候执行的，而 for 循环是在<strong>页面加载的时候执行完毕了</strong>，触发时间的时候，<code class="language-plaintext highlighter-rouge">i=btnObjs.length</code></p>
<h5 id="案例14阻止超链接跳转">案例14：阻止超链接跳转</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/lb1.jpg"</span> <span class="na">id=</span><span class="s">'a1'</span><span class="nt">><img</span> <span class="na">src=</span><span class="s">"images/content_bg.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">'im'</span><span class="nt">></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//方法1：</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">im</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">a1</span><span class="dl">'</span><span class="p">).</span><span class="nx">href</span><span class="p">;</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span><span class="c1">//阻止链接默认跳转</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!--方法2：return flase 写在行内式中--></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.baidu.com"</span> <span class="na">onclick=</span><span class="s">"alert('哎呀,我被点了'); return false"</span><span class="nt">></span>百度<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!--方法3：注意这里哦，这里调用f1的函数，返回的是一个false，所以这里要添加一个return--></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.baidu.com"</span> <span class="na">onclick=</span><span class="s">"return f1()"</span><span class="nt">></span>百度<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">f1</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">哇塞,好漂亮哦</span><span class="dl">"</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="案例15鼠标进入onmouseover离开onmouseout改变标签的背景颜色">案例15：鼠标进入onmouseover、离开onmouseout改变标签的背景颜色</h5>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//为li注册鼠标进入事件</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseover</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">//为li注册鼠标离开事件</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseout</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//恢复到这个标签默认的颜色</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="注意技巧4">注意技巧4：</h5>
<ol>
<li>
<p><code class="language-plaintext highlighter-rouge">getElementsByTagName</code>获取的是数组，如果只使用一个，就要加序号<code class="language-plaintext highlighter-rouge">getElementsByTagName("li")[0]</code></p>
</li>
<li>
<p>设置元素的样式的方式：</p>
<p> 1. <strong>对象 ** . style . **属性 **= **值</strong>；</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>2. **对象** . className = **值**；
</code></pre></div> </div>
</li>
<li>
<p><code class="language-plaintext highlighter-rouge">对象.className=“”</code>使用的时候要注意，若只写想要设置的类名，会<strong>覆盖这个对象所有的类</strong>。</p>
</li>
</ol>
<h5 id="案例17点击按钮修改div的宽高背景颜色">案例17：点击按钮，修改div的宽、高、背景颜色</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"设置样式"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//方法一：直接修改样式 .style.属性 = 值；</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById$</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">300px</span><span class="dl">"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">pink</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//原来在css中是background-color</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c">/*方法二：通过给元素添加css样式属性 .className = 值； */</span>
<span class="nc">.cls</span> <span class="p">{</span><span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span><span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="no">red</span><span class="p">;}</span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className</span>
<span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//等价于：<div id="dv" class=“cls”/cls></div></span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧5">注意技巧5：</h5>
<p>如果在 css 中属性是<strong>多个单词</strong>（带<code class="language-plaintext highlighter-rouge">-</code>）的写法，那么在js代码中DOM操作的时候，要用<strong>驼峰命名法</strong>来调用</p>
<h5 id="案例18获取焦点onfocus失去焦点事件onblur">案例18：获取焦点onfocus，失去焦点事件onblur</h5>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">txt</span><span class="dl">"</span><span class="p">).</span><span class="nx">onfocus</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//判断文本框的内容是不是默认的内容</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">==</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span><span class="c1">//清空文本框</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">black</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">txt</span><span class="dl">"</span><span class="p">).</span><span class="nx">onblur</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//1.判断字符串方式</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">==</span> <span class="dl">""</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">gray</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//2.判断字符串长度方式，更推荐这种，数字判断的运行效率高</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">gray</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧6">注意技巧6：</h5>
<ol>
<li>如果这个属性在浏览器中不支持，那么这个属性的类型是<code class="language-plaintext highlighter-rouge">undefined</code>。</li>
</ol>
<h5 id="案例19自定义属性">案例19：自定义属性</h5>
<ol>
<li>设置自定义属性：<code class="language-plaintext highlighter-rouge">setAttribute("属性的名字","属性的值");</code></li>
<li>获取自定义属性的值：<code class="language-plaintext highlighter-rouge">getAttribute("属性的名字");</code></li>
<li>移除义属性：<code class="language-plaintext highlighter-rouge">removeAttribute("属性的名字");</code></li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"uu"</span><span class="nt">></span>
<span class="nt"><li></span>数学成绩<span class="nt"></li></span>
<span class="nt"><li></span>英语成绩<span class="nt"></li></span>
<span class="nt"><li></span>语文成绩<span class="nt"></li></span>
<span class="nt"><li></span>科学成绩<span class="nt"></li></span>
<span class="nt"><li></span>历史成绩<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">list</span><span class="o">=</span><span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span><span class="c1">//根据id获取ul标签,并且或者该标签中所有的li</span>
<span class="c1">//为每个li添加自定义属性</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span><span class="c1">//循环遍历</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">,(</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span><span class="o">*</span><span class="mi">10</span><span class="p">);</span><span class="c1">//添加在DOM对象上,不在标签中</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span><span class="c1">//点击每个li标签,获取对应的自定义属性值</span>
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">));</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">//移除自定义属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">);</span><span class="c1">//移除自定义属性，没值也没属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">""</span><span class="p">;</span><span class="c1">//移除元素的类样式，值没有了,但是属性还是有的 </span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">class</span><span class="dl">"</span><span class="p">);</span><span class="c1">//移除自定义属性，没值也没属性</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例20获取标签的内容">案例20：获取标签的内容</h5>
<table>
<thead>
<tr>
<th style="text-align: left">分类</th>
<th style="text-align: center">名称</th>
<th style="text-align: left">说明</th>
<th>使用时的区别</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">innerHTML</code></td>
<td style="text-align: left">设置或返回元素开始和结束标签之间的 HTML</td>
<td>保持编写的格式、样式标签<></td>
</tr>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">innerText</code></td>
<td style="text-align: left">设置或返回元素中去除所有标签的内容</td>
<td>去掉所有格式以及标签的纯文本内容</td>
</tr>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">textContent </code></td>
<td style="text-align: left">设置或返回指定节点的文本内容</td>
<td>去掉标签后，保留文本样式，有回车</td>
</tr>
<tr>
<td style="text-align: left">方法</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">document.write()</code></td>
<td style="text-align: left">向文档写入指定的内容</td>
<td> </td>
</tr>
<tr>
<td style="text-align: left">方法</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">document.writeln() </code></td>
<td style="text-align: left">向文档写入指定的内容并换行</td>
<td> </td>
</tr>
</tbody>
</table>
<hr style="visibility: hidden;">
<ul class="pager">
<li class="previous">
<a href="/2019/06/21/%E9%9A%8F%E6%9C%BA%E7%BB%99%E4%B8%80%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E7%9A%84%E9%A2%9C%E8%89%B2/" data-toggle="tooltip" data-placement="top" title="随机给一个盒子添加一个十六进制的颜色">
Previous<br>
<span>随机给一个盒子添加一个十六进制的颜色</span>
</a>
</li>
<li class="next">
<a href="/2019/06/25/Vue2.0%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3-%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-1/" data-toggle="tooltip" data-placement="top" title="Vue2.0官方文档 知识点总结1">
Next<br>
<span>Vue2.0官方文档 知识点总结1</span>
</a>
</li>
</ul>
<!--Gitalk评论start -->
<!-- Gitalk end -->
</div>
<!-- Side Catalog Container -->
<div class="
col-lg-2 col-lg-offset-0
visible-lg-block
sidebar-container
catalog-container">
<div class="side-catalog">
<hr class="hidden-sm hidden-xs">
<h5>
<a class="catalog-toggle" href="#">CATALOG</a>
</h5>
<ul class="catalog-body"></ul>
</div>
</div>
<!-- Sidebar Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
sidebar-container">
<!-- Featured Tags -->
<section>
<hr class="hidden-sm hidden-xs">
<h5><a href="/tags/">FEATURED TAGS</a></h5>
<div class="tags">
<a href="/tags/#《JavaScript高级程序设计4》" title="《JavaScript高级程序设计4》" rel="13">
《JavaScript高级程序设计4》
</a>
<a href="/tags/#< LTN3 >" title="< LTN3 >" rel="19">
< LTN3 >
</a>
<a href="/tags/#< LTN2 >" title="< LTN2 >" rel="22">
< LTN2 >
</a>
<a href="/tags/#< JS原生基础相关 >" title="< JS原生基础相关 >" rel="15">
< JS原生基础相关 >
</a>
<a href="/tags/#< 算法题 >" title="< 算法题 >" rel="40">
< 算法题 >
</a>
<a href="/tags/#< vue相关知识点 >" title="< vue相关知识点 >" rel="9">
< vue相关知识点 >
</a>
<a href="/tags/#< CSS相关内容 >" title="< CSS相关内容 >" rel="27">
< CSS相关内容 >
</a>
<a href="/tags/#< HTTP相关 >" title="< HTTP相关 >" rel="34">
< HTTP相关 >
</a>
<a href="/tags/#< 面试题整理 >" title="< 面试题整理 >" rel="6">
< 面试题整理 >
</a>
<a href="/tags/#< LTN1 >" title="< LTN1 >" rel="12">
< LTN1 >
</a>
<a href="/tags/#< 工作经验沉淀 >" title="< 工作经验沉淀 >" rel="24">
< 工作经验沉淀 >
</a>
<a href="/tags/#< 小程序 >" title="< 小程序 >" rel="5">
< 小程序 >
</a>
<a href="/tags/#< webpack >" title="< webpack >" rel="5">
< webpack >
</a>
<a href="/tags/#< 工程化 >" title="< 工程化 >" rel="2">
< 工程化 >
</a>
<a href="/tags/#< 浏览器原理 >" title="< 浏览器原理 >" rel="39">
< 浏览器原理 >
</a>
<a href="/tags/#< 重构2 >" title="< 重构2 >" rel="5">
< 重构2 >
</a>
<a href="/tags/#< React17+TS4 >" title="< React17+TS4 >" rel="9">
< React17+TS4 >
</a>
</div>
</section>
<!-- Friends Blog -->
<hr>
<h5>FRIENDS</h5>
<ul class="list-inline">
<li><a href="https://juejin.im/">掘金</a></li>
<li><a href="https://segmentfault.com/">SegmentFault</a></li>
<li><a href="https://www.v2ex.com/">V2EX</a></li>
<li><a href="https://readhub.cn/">Readhub</a></li>
<li><a href="https://www.oschina.net/">OSCHINA</a></li>
<li><a href="https://toutiao.io/posts/hot/7">开发者头条</a></li>
</ul>
</div>
</div>
</div>
</article>
<!-- async load function -->
<script>
function async(u, c) {
var d = document, t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = u;
if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
s.parentNode.insertBefore(o, s);
}
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
anchors.options = {
visible: 'always',
placement: 'right',
icon: '#'
};
anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
})
</script>
<style>
/* place left on bigger screen */
@media all and (min-width: 800px) {
.anchorjs-link{
position: absolute;
left: -0.75em;
font-size: 1.1em;
margin-top : -0.1em;
}
}
</style>
</td></tr>',
data: function () {
return { // 记得要写return
content: 'this is a row'
}
}
})
父子组件传值
父组件怎么向子组件传递数据：通过属性
<counter :count='2'></counter> 父组件向子组件通过属性绑定传递值，子组件用props属性接收 ；
count前面不加冒号，传递的是字符串；加了冒号传递的是js表达式，这里就是数字。
<div id="root">
<counter :count='2' ></counter>
<counter :count='3' ></counter>
</div>
var counter={
props:['count'],
template:'<div>0</div>'
}
var vm = new Vue ({
el : '#root',
data:{}
})
如果直接写 this.count++ 的话，会出现一个警告，提示 不要直接修改父组件传过来的数据，所以在此，定义data里面的number作为count的副本，然后修改number的值。
var counter={ //子组件
props:['count'],
data:function(){
return {
number: this.count
}
},
template:'<div @click="handleClick"></div>',
methods:{
handleClick:function(){
this.number = this.number + 2;
}
}
}
var vm = new Vue ({ //根组件
el : '#root',
data:{
total:5
},
components:{
counter:counter
}
})
子组件怎么向父组件传递数据: 通过事件
this.$emit('increase',2); 这里向外触发一个increase事件，同时可以传递参数每次改变都加步长2；
让父组件监听，在根组件中添加监听事件handleIncrease事件，传入步长2。
<div id="root">
<counter :count='2' @increase='handleIncrease'></counter> //父组件监听
<counter :count='3' @increase='handleIncrease'></counter>
<div ></div>
</div>
var counter={
props:['count'],
data:function(){
return {
number:this.count
}
},
template:'<div @click="handleClick"></div>',
methods:{
handleClick:function(){
this.number = this.number + 2;
this.$emit('increase',2);
}
}
}
var vm = new Vue ({
el : '#root',
data:{
total:5
},
components:{
counter:counter
},
methods:{
handleIncrease:function(step){ //可以在触发的时候传递step参数
this.total += step;
}
}
})
组件的参数校验与非props特性
如果要实现子组件要求父组件传递过来的参数一定要是字符串，在props里面 不写数组，而是写对象，对象的键就是我们接收的参数的名字。
<div id="root">
<child content='hello world'></child>
</div>
//子组件
Vue.component('child',{
props:{
// content:String
// 这行的意思就是子组件接收的参数一定要是一个字符串类型;
// content:[Number,String]
// 可以用数组来定义传输参数的类型，可以是字符串/数组;
content:{
type:String,
required:false,// true 说明了这个是必须传的；如果是false,那么不传也可以
default: 'default value',// 假设不传的时候,会显示默认值 ‘default value’
validator:function(value){
//自定义校验器：先获取传入的参数值value,要求满足条件,要是没有满足，控制台就会报错
return (value.lenght>5)
}
}
},
template:'<div><!-- Image to hack wechat -->
<!-- <img src="/img/icon_wechat.png" width="0" height="0"> -->
<!-- <img src="/img/home.jpg" width="0" height="0"> -->
<!-- Post Header -->
<style type="text/css">
header.intro-header{
position: relative;
background-image: url('/img/home.jpg')
}
</style>
<header class="intro-header" >
<div class="header-mask"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<div class="tags">
<a class="tag" href="/tags/#< JS原生基础相关 >" title="< JS原生基础相关 >">< JS原生基础相关 ></a>
</div>
<h1>DOM相关知识点整理1</h1>
<h2 class="subheading"></h2>
<span class="meta">Posted by CodingWithAlice on June 23, 2019</span>
</div>
</div>
</div>
</div>
</header>
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<!-- Post Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
post-container">
<h3 id="本文概要如下">本文概要如下：</h3>
<ul>
<li>
<p><strong>DOM树</strong>：把html页面或者是xml文件看成是一个文档，文档就是一个对象，这个文档中所有的标签都是元素，元素也可以看成是对象/标签(元素，对象)有很多，还有嵌套的关系，组成的这种层次结构，可以模拟成树形结构图，简称：树状图，就是DOM树。</p>
</li>
<li>
<p><strong>DOM对象</strong>：通过DOM方式获取的元素得到的对象</p>
</li>
<li>
<p><strong>获取元素多种方式</strong>：</p>
</li>
</ul>
<ol>
<li>
<p>根据 <strong>id属性</strong> 的值获取元素，返回来的是<strong>一个元素对象</strong>；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementById("id属性的值");</code></p>
</li>
<li>
<p>根据 <strong>标签名字</strong> 获取元素，返回来的是一个<strong>伪数组</strong>，返回具有指定标签名的元素子元素集合；<code class="language-plaintext highlighter-rouge">document.getElementsByTagName("标签名字");</code></p>
<p><strong>下面的几个,有的浏览器不支持(ie8)</strong></p>
</li>
<li>
<p>根据 <strong>name属性</strong> 的值获取元素,返回来的是一个<strong>伪数组</strong>,里面保存了多个的DOM对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementsByName("name属性的值")</code></p>
</li>
<li>
<p>根据 <strong>类样式</strong> 的名字来获取元素，返回来的是一个<strong>伪数组</strong>，里面保存了多个的DOM对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.getElementsByClassName("类样式的名字")</code></p>
</li>
<li>
<p>根据 <strong>选择器</strong> 获取元素，返回来的是<strong>一个元素对象</strong>，文档中匹配到指定的元素的第一个对象；</p>
<p><code class="language-plaintext highlighter-rouge">document.querySelector("选择器的名字#btn"); </code></p>
</li>
<li>
<p>根据 <strong>选择器</strong> 获取元素，返回来的是一个<strong>伪数组</strong>，文档中匹配到指定的元素的对象集合；</p>
<p><code class="language-plaintext highlighter-rouge">document.querySelectorAll("选择器的名字.cls") </code></p>
</li>
</ol>
<ul>
<li>获取boby、title、html标签</li>
</ul>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">;</span> <span class="c1">//获取的是元素--标签</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span> <span class="c1">//标签中的值</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">;</span><span class="c1">//获取根元素html</span>
</code></pre></div></div>
<ul>
<li>操作<strong>基本标签</strong>的属性
<ul>
<li><code class="language-plaintext highlighter-rouge">src,title,alt,href,id</code>属性</li>
</ul>
</li>
<li>操作<strong>表单标签</strong>的属性吧
<ul>
<li><code class="language-plaintext highlighter-rouge">name,value,type,checked,selected,disabled,readonly</code></li>
</ul>
</li>
<li>元素的<strong>样式操作</strong>
<ul>
<li><code class="language-plaintext highlighter-rouge">对象.style.属性=值;</code></li>
<li><code class="language-plaintext highlighter-rouge">对象.className=值;</code></li>
</ul>
</li>
</ul>
<p>为元素添加事件的操作：有<strong>事件源，触发和响应</strong>；</p>
<p>例如：按钮被点击,弹出对话框
其中：按钮—->事件源
点击—->事件名字
被点了—>触发了
弹框了—>响应</p>
<hr />
<p>接下来是详细分析介绍：</p>
<h4 id="dom经常进行的操作"><strong>DOM经常进行的操作</strong>：</h4>
<p> • 获取元素
• 动态创建元素
• 对元素进行操作(设置其属性或调用其方法)
• 事件(什么时机做相应的操作)
<!--html代码中嵌入了js的代码,不方便后期的修改和维护--></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"弹框"</span> <span class="na">onclick=</span><span class="s">"alert('哈哈,我又变帅了')"</span> <span class="nt">/></span>
</code></pre></div></div>
<p>等价于</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">哈哈,我又变帅了</span><span class="dl">"</span><span class="p">);</span>
<span class="p">};</span>
</code></pre></div></div>
<p>等价于</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">btnObj</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">这是分成两行代码的方式</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<ul>
<li>
<p>HTML：展示信息，<strong>展示数据</strong>的</p>
</li>
<li>
<p>XML：侧重于<strong>存储数据</strong></p>
</li>
<li>
<p><strong>根元素:html标签</strong></p>
<ul>
<li><strong>元素(element)</strong>：页面中的所有的标签都是元素，元素可以看成是对象</li>
</ul>
</li>
<li><strong>文档 document</strong>：一个网页可以称为文档；<strong>页面中的顶级对象</strong>；</li>
<li><strong>节点 Node</strong>：网页中的<strong>所有内容都是节点</strong>（标签、属性、文本[文字、换行、空格、回车]、注释等）</li>
<li><strong>节点的属性</strong>：标签的属性；作用：为了将来<strong>获取很多节点</strong>，得到节点中的标签（元素），识别节点中的标签元素</li>
</ul>
<p><img src="/../img/assets_2019/dom1.png" style="zoom:65%;" /></p>
<ul>
<li>点击事件：如下以案例举例出现的情况以及其功能</li>
</ul>
<h5 id="案例1点击按钮显示图片点击按钮的时候设置img标签的src属性有一个图片的路径"><strong>案例1：点击按钮显示图片</strong>：点击按钮的时候设置img标签的src属性有一个图片的路径</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示图片"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">""</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"im"</span> <span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//为按钮注册点击事件,添加事件处理函数</span>
<span class="nx">btnObj</span><span class="p">.</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">imObj</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">im</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="dl">"</span><span class="s2">images/liuyan.jpg</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">width</span><span class="o">=</span><span class="dl">"</span><span class="s2">300</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">imObj</span><span class="p">.</span><span class="nx">height</span><span class="o">=</span><span class="dl">"</span><span class="s2">400</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例2点击按钮修改p标签的显示内容"><strong>案例2：点击按钮，修改p标签的显示内容</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"设置p的内容"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"p1"</span><span class="nt">></span>我是一个p标签<span class="nt"></p></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//根据id获取按钮,为按钮注册点击事件,添加事件处理函数</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//根据id获取p标签,设置内容</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">p1</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span><span class="o">=</span><span class="dl">"</span><span class="s2">这是一个p</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧1">注意技巧1：</h5>
<p>凡是<strong>成对的标签</strong>,中间的<strong>文本内容</strong>,设置的时候,都使用 <strong>innerText</strong> 这个属性的方式；</p>
<h5 id="案例3点击按钮修改a标签的地址和热点文字"><strong>案例3：点击按钮修改a标签的地址和热点文字</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><a</span> <span class="na">id=</span><span class="s">"ak"</span> <span class="na">href=</span><span class="s">"https://www.jiumodiary.com/"</span><span class="nt">></span>鸠摩搜书<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//注册点击事件,添加事件处理函数</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//设置href属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://codingwithalice.github.io/</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//设置文字内容</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<p>可对javascript代码进行<strong>优化</strong>：</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//上面的代码，获取了两次id为ak的元素，增加了浏览器的负担。</span>
<span class="c1">//优化后的:</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//设置href属性，设置文字内容</span>
<span class="kd">var</span> <span class="nx">aObj</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">aObj</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://codingwithalice.github.io/</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">aObj</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例4点击按钮设置多个p标签的文字内容"><strong>案例4：点击按钮设置多个p标签的文字内容</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv1"</span><span class="nt">></span>
<span class="nt"><p></span>CtrlCoder<span class="nt"></p></span>
<span class="nt"><p></span>CtrlCoder<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv2"</span><span class="nt">></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"><p></span>CodingWithAlice<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//根据标签名字获取标签,返回的是一个伪数组</span>
<span class="kd">var</span> <span class="nx">pObjs</span><span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">p</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//循环遍历这个数组</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">pObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">//每个p标签,设置文字</span>
<span class="nx">pObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerText</span><span class="o">=</span><span class="dl">"</span><span class="s2">我们都是p</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例5点击按钮改变图片的alt和titile"><strong>案例5：点击按钮改变图片的alt和titile</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示效果"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/cangjingkong.jpg"</span> <span class="na">alt=</span><span class="s">"CtrlCoder"</span> <span class="na">title=</span><span class="s">"CodingWithAlice"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//没有给img id名称，可以用tagname获取，但是一定要注意返回的是一个伪数组</span>
<span class="kd">var</span> <span class="nx">imgObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">img</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">imgObjs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">alt</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">改了</span><span class="dl">"</span><span class="p">;</span><span class="c1">//调用的时候以数组的形式调用</span>
<span class="nx">imgObjs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">title</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">实现吧</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例6点击按钮修改文本框的值"><strong>案例6：点击按钮修改文本框的值</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"修改文本框的值"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">/><br/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的文本框，包含了第一个type为button</span>
<span class="kd">var</span> <span class="nx">inputs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">inputs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//用该元素的type属性判断这个元素是不是按钮</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">inputs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">type</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">button</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">inputs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例7显示与隐藏"><strong>案例7：显示与隐藏</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nt">div</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkmagenta</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隐藏"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"显示"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">none</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span><span class="o">=</span><span class="dl">"</span><span class="s2">block</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例7显示与隐藏优化一个按钮的写法"><strong>案例7：显示与隐藏优化：一个按钮的写法</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nt">div</span><span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="no">darkmagenta</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.cls</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隐藏"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//点击按钮,通过类样式的方式设置div的显示和隐藏</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//判断的是div是否应用了类样式</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//没有应用类样式，现在是显示的,应该隐藏</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//执行完上一句，就隐藏了，按钮改变</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">显示</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="c1">//执行完上一句，就显示了，按钮改变</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">隐藏</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例8开关灯body标签背景颜色"><strong>案例8：开关灯，body标签背景颜色</strong></h5>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nt">style</span><span class="o">></span>
<span class="nc">.cls</span> <span class="p">{</span><span class="nl">background-color</span><span class="p">:</span> <span class="no">black</span><span class="p">;}</span>
<span class="o"></</span><span class="nt">style</span><span class="o">></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"开/关灯"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">className</span> <span class="o">!=</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">""</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例9单选和多选和下拉菜单"><strong>案例9：单选和多选和下拉菜单</strong></h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//单选
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"修改性别"</span> <span class="na">id=</span><span class="s">"btn1"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"sex"</span><span class="nt">/></span>男
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">name=</span><span class="s">"sex"</span> <span class="na">id=</span><span class="s">"rad1"</span><span class="nt">/></span>女
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">name=</span><span class="s">"sex"</span><span class="nt">/></span>保密
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn1</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">rad1</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧2">注意技巧2：</h5>
<p>在表单标签中,如果<strong>属性和值只有一个</strong>，并且值是这个属性本身，那么在写js代码，DOM操作的时候，这个属性值，是<strong>布尔类型</strong>就可以了。</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//多选
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"选择兴趣"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="nt">/></span>吃饭
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="na">id=</span><span class="s">"ck1"</span> <span class="nt">/></span>睡觉
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">name=</span><span class="s">"xingqu"</span> <span class="na">id=</span><span class="s">"ck2"</span> <span class="nt">/></span>打豆豆
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ck1</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ck2</span><span class="dl">"</span><span class="p">).</span><span class="nx">checked</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//下拉菜单
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"点菜"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><select</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"ss"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>油炸榴莲<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>爆炒臭豆腐<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>清蒸助教<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">id=</span><span class="s">"op1"</span><span class="nt">></span>凉拌班主任<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">></span>红烧小苏<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//点击按钮选择菜</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">op1</span><span class="dl">"</span><span class="p">).</span><span class="nx">selected</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例10改变文本域内的值">案例10：改变文本域内的值</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><textarea</span> <span class="na">name=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"tt"</span> <span class="na">cols=</span><span class="s">"30"</span> <span class="na">rows=</span><span class="s">"10"</span> <span class="na">readonly=</span><span class="s">"readonly"</span><span class="err">/</span><span class="na">disabled=</span><span class="s">“disabled”/readonly/disabled</span> <span class="nt">></span>
注册用户的协议:某人问智者,大师:您觉得怎么做才是最快乐的?回答说:不要和愚者辩论这个人说:我不这么认为!大师说:您说的对.
<span class="nt"></textarea></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"注册"</span> <span class="na">id=</span><span class="s">"btn2"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn2</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//推荐使用value，textarea是表单标签。</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">tt</span><span class="dl">"</span><span class="p">).</span><span class="nx">value</span><span class="o">=</span><span class="dl">"</span><span class="s2">CodingWithAlice</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//document.getElementById("tt").innerText="哈哈";</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例11点击小图保留显示大图">案例11：点击小图(保留),显示大图</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/1.jpg"</span> <span class="na">id=</span><span class="s">"ak"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/1-small.jpg"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">""</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"big"</span><span class="nt">></span> //保证小图的保留
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//点击小图,下面显示大图 //点击超链接触发事件</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">ak</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">big</span><span class="dl">"</span><span class="p">).</span><span class="nx">src</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span><span class="c1">//保证小图的保留</span>
<span class="p">};</span>
</code></pre></div></div>
<p>相册操作：</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"imagegallery"</span><span class="nt">></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/1.jpg"</span> <span class="na">title=</span><span class="s">"A"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/1-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"1"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/2.jpg"</span> <span class="na">title=</span><span class="s">"B"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/2-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"2"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/3.jpg"</span> <span class="na">title=</span><span class="s">"C"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/3-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"3"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"><li></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/4.jpg"</span> <span class="na">title=</span><span class="s">"D"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/4-small.jpg"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">alt=</span><span class="s">"4"</span><span class="nt">/></span>
<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><img</span> <span class="na">id=</span><span class="s">"image"</span> <span class="na">src=</span><span class="s">"images/placeholder.png"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">width=</span><span class="s">"450"</span><span class="nt">/></span>//点击链接a后显示大图的标签
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"des"</span><span class="nt">></span>选择一个图片<span class="nt"></p></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第一步：点击a标签,把a标签中的href的属性值给id为image的src属性</span>
<span class="c1">//第二步：把a的title属性的值给id为des的p标签赋值</span>
<span class="kd">var</span> <span class="nx">aObjs</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">imagegallery</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">);</span>
<span class="c1">//循环遍历所有的a标签</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">aObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">//为每个a标签注册点击事件</span>
<span class="nx">aObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">image</span><span class="dl">"</span><span class="p">).</span><span class="nx">src</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">href</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">des</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerText</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
<span class="c1">//阻止超链接默认的跳转</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="案例12隔行变色奇红偶黄">案例12：隔行变色，奇红偶黄</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"隔行变色"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"uu"</span><span class="nt">></span>
<span class="nt"><li></span>红旗<span class="nt"></li></span>
<span class="nt"><li></span>五菱宏光<span class="nt"></li></span>
<span class="nt"><li></span>奔驰<span class="nt"></li></span>
<span class="nt"><li></span>兰博基尼<span class="nt"></li></span>
<span class="nt"><li></span>哈弗<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第一种方法</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mi">2</span><span class="o">==</span><span class="mi">0</span><span class="p">){</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//第二种方法：简写，善于利用三元表达式</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例13排他功能">案例13：排他功能</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"没怀孕"</span><span class="nt">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">btnObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">btnObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//每个事件包括两件事情</span>
<span class="nx">btnObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//第一：把所有的按钮的value值设置为默认的值:没怀孕</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="nx">btnObjs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">btnObjs</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">没怀孕</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//第二：当前被点击的按钮设置为:怀孕了</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">怀孕了</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="注意技巧3">注意技巧3：</h5>
<p>设置被点击按钮的时候，不能用<code class="language-plaintext highlighter-rouge">btnObjs[i].value</code> ，因为事件是在触发的时候执行的，而 for 循环是在<strong>页面加载的时候执行完毕了</strong>，触发时间的时候，<code class="language-plaintext highlighter-rouge">i=btnObjs.length</code></p>
<h5 id="案例14阻止超链接跳转">案例14：阻止超链接跳转</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"images/lb1.jpg"</span> <span class="na">id=</span><span class="s">'a1'</span><span class="nt">><img</span> <span class="na">src=</span><span class="s">"images/content_bg.jpg"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">id=</span><span class="s">'im'</span><span class="nt">></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//方法1：</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">im</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">a1</span><span class="dl">'</span><span class="p">).</span><span class="nx">href</span><span class="p">;</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span><span class="c1">//阻止链接默认跳转</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!--方法2：return flase 写在行内式中--></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.baidu.com"</span> <span class="na">onclick=</span><span class="s">"alert('哎呀,我被点了'); return false"</span><span class="nt">></span>百度<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!--方法3：注意这里哦，这里调用f1的函数，返回的是一个false，所以这里要添加一个return--></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://www.baidu.com"</span> <span class="na">onclick=</span><span class="s">"return f1()"</span><span class="nt">></span>百度<span class="nt"></a></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">f1</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">哇塞,好漂亮哦</span><span class="dl">"</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="案例15鼠标进入onmouseover离开onmouseout改变标签的背景颜色">案例15：鼠标进入onmouseover、离开onmouseout改变标签的背景颜色</h5>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//获取所有的li标签</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//为li注册鼠标进入事件</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseover</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yellow</span><span class="dl">"</span><span class="p">;</span>
<span class="p">};</span>
<span class="c1">//为li注册鼠标离开事件</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseout</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//恢复到这个标签默认的颜色</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="注意技巧4">注意技巧4：</h5>
<ol>
<li>
<p><code class="language-plaintext highlighter-rouge">getElementsByTagName</code>获取的是数组，如果只使用一个，就要加序号<code class="language-plaintext highlighter-rouge">getElementsByTagName("li")[0]</code></p>
</li>
<li>
<p>设置元素的样式的方式：</p>
<p> 1. <strong>对象 ** . style . **属性 **= **值</strong>；</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>2. **对象** . className = **值**；
</code></pre></div> </div>
</li>
<li>
<p><code class="language-plaintext highlighter-rouge">对象.className=“”</code>使用的时候要注意，若只写想要设置的类名，会<strong>覆盖这个对象所有的类</strong>。</p>
</li>
</ol>
<h5 id="案例17点击按钮修改div的宽高背景颜色">案例17：点击按钮，修改div的宽、高、背景颜色</h5>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">value=</span><span class="s">"设置样式"</span> <span class="na">id=</span><span class="s">"btn"</span><span class="nt">/></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"dv"</span><span class="nt">></div></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//方法一：直接修改样式 .style.属性 = 值；</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById$</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">300px</span><span class="dl">"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">200px</span><span class="dl">"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">pink</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//原来在css中是background-color</span>
<span class="p">};</span>
</code></pre></div></div>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c">/*方法二：通过给元素添加css样式属性 .className = 值； */</span>
<span class="nc">.cls</span> <span class="p">{</span><span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span><span class="nl">background-color</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="no">red</span><span class="p">;}</span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className</span>
<span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">"</span><span class="s2">cls</span><span class="dl">"</span><span class="p">;</span>
<span class="c1">//等价于：<div id="dv" class=“cls”/cls></div></span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧5">注意技巧5：</h5>
<p>如果在 css 中属性是<strong>多个单词</strong>（带<code class="language-plaintext highlighter-rouge">-</code>）的写法，那么在js代码中DOM操作的时候，要用<strong>驼峰命名法</strong>来调用</p>
<h5 id="案例18获取焦点onfocus失去焦点事件onblur">案例18：获取焦点onfocus，失去焦点事件onblur</h5>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">txt</span><span class="dl">"</span><span class="p">).</span><span class="nx">onfocus</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//判断文本框的内容是不是默认的内容</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">==</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">""</span><span class="p">;</span><span class="c1">//清空文本框</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">black</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">txt</span><span class="dl">"</span><span class="p">).</span><span class="nx">onblur</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">//1.判断字符串方式</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">==</span> <span class="dl">""</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">gray</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//2.判断字符串长度方式，更推荐这种，数字判断的运行效率高</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">请输入搜索内容</span><span class="dl">"</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">gray</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="注意技巧6">注意技巧6：</h5>
<ol>
<li>如果这个属性在浏览器中不支持，那么这个属性的类型是<code class="language-plaintext highlighter-rouge">undefined</code>。</li>
</ol>
<h5 id="案例19自定义属性">案例19：自定义属性</h5>
<ol>
<li>设置自定义属性：<code class="language-plaintext highlighter-rouge">setAttribute("属性的名字","属性的值");</code></li>
<li>获取自定义属性的值：<code class="language-plaintext highlighter-rouge">getAttribute("属性的名字");</code></li>
<li>移除义属性：<code class="language-plaintext highlighter-rouge">removeAttribute("属性的名字");</code></li>
</ol>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"uu"</span><span class="nt">></span>
<span class="nt"><li></span>数学成绩<span class="nt"></li></span>
<span class="nt"><li></span>英语成绩<span class="nt"></li></span>
<span class="nt"><li></span>语文成绩<span class="nt"></li></span>
<span class="nt"><li></span>科学成绩<span class="nt"></li></span>
<span class="nt"><li></span>历史成绩<span class="nt"></li></span>
<span class="nt"></ul></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">list</span><span class="o">=</span><span class="nx">my$</span><span class="p">(</span><span class="dl">"</span><span class="s2">uu</span><span class="dl">"</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="dl">"</span><span class="s2">li</span><span class="dl">"</span><span class="p">);</span><span class="c1">//根据id获取ul标签,并且或者该标签中所有的li</span>
<span class="c1">//为每个li添加自定义属性</span>
<span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span><span class="c1">//循环遍历</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">,(</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span><span class="o">*</span><span class="mi">10</span><span class="p">);</span><span class="c1">//添加在DOM对象上,不在标签中</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span><span class="p">(){</span><span class="c1">//点击每个li标签,获取对应的自定义属性值</span>
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">));</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="c1">//移除自定义属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">btn</span><span class="dl">"</span><span class="p">).</span><span class="nx">onclick</span><span class="o">=</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">score</span><span class="dl">"</span><span class="p">);</span><span class="c1">//移除自定义属性，没值也没属性</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">""</span><span class="p">;</span><span class="c1">//移除元素的类样式，值没有了,但是属性还是有的 </span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">dv</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">class</span><span class="dl">"</span><span class="p">);</span><span class="c1">//移除自定义属性，没值也没属性</span>
<span class="p">};</span>
</code></pre></div></div>
<h5 id="案例20获取标签的内容">案例20：获取标签的内容</h5>
<table>
<thead>
<tr>
<th style="text-align: left">分类</th>
<th style="text-align: center">名称</th>
<th style="text-align: left">说明</th>
<th>使用时的区别</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">innerHTML</code></td>
<td style="text-align: left">设置或返回元素开始和结束标签之间的 HTML</td>
<td>保持编写的格式、样式标签<></td>
</tr>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">innerText</code></td>
<td style="text-align: left">设置或返回元素中去除所有标签的内容</td>
<td>去掉所有格式以及标签的纯文本内容</td>
</tr>
<tr>
<td style="text-align: left">属性</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">textContent </code></td>
<td style="text-align: left">设置或返回指定节点的文本内容</td>
<td>去掉标签后，保留文本样式，有回车</td>
</tr>
<tr>
<td style="text-align: left">方法</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">document.write()</code></td>
<td style="text-align: left">向文档写入指定的内容</td>
<td> </td>
</tr>
<tr>
<td style="text-align: left">方法</td>
<td style="text-align: center"><code class="language-plaintext highlighter-rouge">document.writeln() </code></td>
<td style="text-align: left">向文档写入指定的内容并换行</td>
<td> </td>
</tr>
</tbody>
</table>
<hr style="visibility: hidden;">
<ul class="pager">
<li class="previous">
<a href="/2019/06/21/%E9%9A%8F%E6%9C%BA%E7%BB%99%E4%B8%80%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%E7%9A%84%E9%A2%9C%E8%89%B2/" data-toggle="tooltip" data-placement="top" title="随机给一个盒子添加一个十六进制的颜色">
Previous<br>
<span>随机给一个盒子添加一个十六进制的颜色</span>
</a>
</li>
<li class="next">
<a href="/2019/06/25/Vue2.0%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3-%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-1/" data-toggle="tooltip" data-placement="top" title="Vue2.0官方文档 知识点总结1">
Next<br>
<span>Vue2.0官方文档 知识点总结1</span>
</a>
</li>
</ul>
<!--Gitalk评论start -->
<!-- Gitalk end -->
</div>
<!-- Side Catalog Container -->
<div class="
col-lg-2 col-lg-offset-0
visible-lg-block
sidebar-container
catalog-container">
<div class="side-catalog">
<hr class="hidden-sm hidden-xs">
<h5>
<a class="catalog-toggle" href="#">CATALOG</a>
</h5>
<ul class="catalog-body"></ul>
</div>
</div>
<!-- Sidebar Container -->
<div class="
col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
sidebar-container">
<!-- Featured Tags -->
<section>
<hr class="hidden-sm hidden-xs">
<h5><a href="/tags/">FEATURED TAGS</a></h5>
<div class="tags">
<a href="/tags/#《JavaScript高级程序设计4》" title="《JavaScript高级程序设计4》" rel="13">
《JavaScript高级程序设计4》
</a>
<a href="/tags/#< LTN3 >" title="< LTN3 >" rel="19">
< LTN3 >
</a>
<a href="/tags/#< LTN2 >" title="< LTN2 >" rel="22">
< LTN2 >
</a>
<a href="/tags/#< JS原生基础相关 >" title="< JS原生基础相关 >" rel="15">
< JS原生基础相关 >
</a>
<a href="/tags/#< 算法题 >" title="< 算法题 >" rel="40">
< 算法题 >
</a>
<a href="/tags/#< vue相关知识点 >" title="< vue相关知识点 >" rel="9">
< vue相关知识点 >
</a>
<a href="/tags/#< CSS相关内容 >" title="< CSS相关内容 >" rel="27">
< CSS相关内容 >
</a>
<a href="/tags/#< HTTP相关 >" title="< HTTP相关 >" rel="34">
< HTTP相关 >
</a>
<a href="/tags/#< 面试题整理 >" title="< 面试题整理 >" rel="6">
< 面试题整理 >
</a>
<a href="/tags/#< LTN1 >" title="< LTN1 >" rel="12">
< LTN1 >
</a>
<a href="/tags/#< 工作经验沉淀 >" title="< 工作经验沉淀 >" rel="24">
< 工作经验沉淀 >
</a>
<a href="/tags/#< 小程序 >" title="< 小程序 >" rel="5">
< 小程序 >
</a>
<a href="/tags/#< webpack >" title="< webpack >" rel="5">
< webpack >
</a>
<a href="/tags/#< 工程化 >" title="< 工程化 >" rel="2">
< 工程化 >
</a>
<a href="/tags/#< 浏览器原理 >" title="< 浏览器原理 >" rel="39">
< 浏览器原理 >
</a>
<a href="/tags/#< 重构2 >" title="< 重构2 >" rel="5">
< 重构2 >
</a>
<a href="/tags/#< React17+TS4 >" title="< React17+TS4 >" rel="9">
< React17+TS4 >
</a>
</div>
</section>
<!-- Friends Blog -->
<hr>
<h5>FRIENDS</h5>
<ul class="list-inline">
<li><a href="https://juejin.im/">掘金</a></li>
<li><a href="https://segmentfault.com/">SegmentFault</a></li>
<li><a href="https://www.v2ex.com/">V2EX</a></li>
<li><a href="https://readhub.cn/">Readhub</a></li>
<li><a href="https://www.oschina.net/">OSCHINA</a></li>
<li><a href="https://toutiao.io/posts/hot/7">开发者头条</a></li>
</ul>
</div>
</div>
</div>
</article>
<!-- async load function -->
<script>
function async(u, c) {
var d = document, t = 'script',
o = d.createElement(t),
s = d.getElementsByTagName(t)[0];
o.src = u;
if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
s.parentNode.insertBefore(o, s);
}
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
anchors.options = {
visible: 'always',
placement: 'right',
icon: '#'
};
anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
})
</script>
<style>
/* place left on bigger screen */
@media all and (min-width: 800px) {
.anchorjs-link{
position: absolute;
left: -0.75em;
font-size: 1.1em;
margin-top : -0.1em;
}
}
</style>
</div>'
})
//根组件
var vm = new Vue({
el:'#root',
})
- props特性 指的就是父组件传递一个参数给子组件，同时子组件也定义了相应的props对父组件进行接收；
- props特性的特点：
- 父组件定义了参数传递
content='hell'，但是在 DOM结构里面是看不到 的； - 子组件接收到父组件传递的值之后，就可以 直接在子组件用插值表达式或者
this.content获取到参数的值了
- 父组件定义了参数传递
- 非props特性 指的是父组件传递一个参数给子组件，但是子组件没有定义props相关内容
- 在这种情况下：
- 页面会报错，content没有定义无法使用，获取不到参数内容
- 这个属性会展示在子组件最外层的DOM标签的HTML的属性里面
原生事件：@click.native
这里绑定的 click 是一个自定义事件，而不是点击事件，原生点击事件要和 div 标签绑在一起，先触发了原生 click，触发了子组件中的 handleChildClick 事件，然后在这个事件中，向外触发了自定义事件 click，而在父组件中监听了自定义click事件，触发了父组件中的handleClick。
<div id="root">
<child @click='handleClick'></child> <!--这里不是原生事件，需要触发，是自定义事件-->
</div>
Vue.component('child',{
template:'<div @click="handleChildClick">Child</div>',// 这里是原生事件
methods:{
handleChildClick:function(){
alert('handleChildClick')
this.$emit('click') // 触发自定义事件
}
}
})
var vm = new Vue({
el:'#root',
methods:{
handleClick:function(){
alert('click')
}
}
})
在自定义的 click 后面添加一个事件修饰符native，表示的就是这个 click 不再是自定义事件，而是一个原生的点击事件。
<div id="root1">
<child1 @click.native='handleClick'></child1>
</div>
Vue.component('child1',{
template:'<div>Child</div>'
})
var vm= new Vue({
el:'#root1',
methods:{
handleClick:function(){
alert('success')
}
}
})
非父子组件间传值 - Bus总线
(BUS总线又称发布订阅模式又称观察者模式) Vue.prototype.bus = new Vue()
在Vue的prototype上面挂载了一个bus属性，这个属性指向一个vue的实例，只要后面创建vue，每一个都有bus属性，指向同一个实例。
<!--想要两个child之间的值进行传递-->
<div id="root">
<child content='Alice'></child>
<child content='Sunny'></child>
</div>
// 在Vue的prototype上面挂载了一个bus属性，这个属性指向一个vue的实例
Vue.prototype.bus = new Vue();
Vue.component('child', {
data: function () {
return {
selfContent: this.content
}
},
props: {
content: String // content的内容是从父组件传递过来的，不能直接改变（单向数据流）
},
template: '<div @click="handleClick"></div>',
methods: {
handleClick: function () {
this.bus.$emit('change', this.selfContent);
}
},
mounted: function () {
var this_ = this
// 这是一个生命周期钩子,每个组件被挂载的时候执行的函数,让组件进行监听bus的改变
this.bus.$on('change', function (msg) {
this_.selfContent = msg;
})
}
})
var vm = new Vue({
el: '#root'
})
插槽 slot
问：如何让父组件用插槽优雅得向子组件传递DOM结构？
- 解答：先在父组件里面插入一个p标签；然后在模板中插入slot标签，slot标签会引用在父组件中插入的内容。
slot特性：
- 在子组件 template 中直接使用 slot ，可以接收到子组件 child 里面传递DOM结构
<h1>Alice</h1>； - 默认内容，如果没有插槽内容，就会显示
<slot>默认内容<slot>或者<slot><h1>默认内容</h1></slot>；
<div id='root'>
<child>
<h1>Alice</h1>
</child>
</div>
Vue.conponent('child',{
template:`<div>
<p>Hello</p>
<slot>默认内容</slot>
</div>`
})
var vm = new Vue({
el"'#root'
})
-
slot接收内容的时候，是无差别接收的，所以要使用 具名插槽
slot='name'，也有默认值通过这种写法，可以一次性传递多个DOM结构，而在子组件中使用具名插槽分别来使用不同部分的DOM结构
<div id='root'>
<body-content>
<div slot='header'>header</div>
<div slot='footer'>footer</div>
</body-content>
</div>
Vue.conponent('body-content',{
template:`<div>
<slot name='header'>default header</slot>
<div class='content'>content</div>
<slot name='footer'>default footer</slot>
</div>`
})
var vm = new Vue({
el"'#root'
})
## 作用域插槽 slot-scope=’props’
<template slot-scope='props'></template>
问：作用域插槽的应用场景？
-
回答：当子组件的 DOM结构需要由外部传递 进来的时候；子组件可以更方便地向父组件的插槽里面传数据
首先，父组件调用子组件的时候，给子组件传了一个插槽，这个插槽叫做作用域插槽：
- 必须以
<template>标签包裹； - 同时这个插槽需要声明要从子组件接受的数据放在
slot-scope='props'； - 还要 告诉子组件一个模板的信息(接收到的数据的展示方式)，
<li>、<h1>标签等对这个数据进行展示。
- 必须以
<div id='root'>
<child>
<!-- 外面套一个template是一个固定写法-->
<template slot-scope='props'>
<!-- slot-scope='props' 这个属性其实是接收 :item=item 传递过来的item-->
<h1> - hello</h1>
</template>
</child>
</div>
Vue.component('child',{ //子组件
data:function(){
return {
list:[1,2,3,4] //循环展示list内容
}
},
template:`<div>
<ul>
<slot
v-for="item of list"
:item=item
>
</slot>
</ul>
</div>`
})
var vm = new Vue({
el:'#root'
})
动态组件 :is=’type’
直接用实例展示说明，如下是三种实现toggle的办法：
1/3、常规方法
<div id="root">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<button @click='handleBtnClick'>change</button>
</div>
Vue.component('child-one', {
template: '<div>child-one</div>'
})
Vue.component('child-two', {
template: '<div>child-two</div>'
})
var vm = new Vue({
el: '#root',
data: {
type: 'child-one'
},
methods: {
handleBtnClick: function () {
this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
}
}
})
2/3、接下来尝试用动态组件实现
动态组件定义：根据is里面数据的变化自动加载不同的组件
<div id="root1">
<!-- component标签是vue自带的表示动态组件的标签 -->
<component :is='type'></component>
<button @click='handleBtnClick1'>change</button>
</div>
//和上面的vue代码是一样的
Vue.component('child-one', {
template: '<div>child-one</div>'
})
Vue.component('child-two', {
template: '<div>child-two</div>'
})
var vm = new Vue({
el: '#root',
data: {
type: 'child-one'
},
methods: {
handleBtnClick: function () {
this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
}
}
})
3/3、优化动态组件写法
使用了一个 v-once 的指令，在组件第一次被渲染的时候，会直接 放在内存里面，性能更高，有效提高一些静态内容的展示效率；如果不加 v-once 的时候，每次切换，都要在底层先销毁一个组件，再创建一个组件，耗费了一定的性能。
【补充】v-once 作用：执行一次性地插值，当数据改变时，插值处的内容不会更新；v-once 所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染
//和上面代码唯一不同的就是这里添加了v-once
Vue.component('child-one', {
template: '<div v-once>child-one</div>'
})
Vue.component('child-two', {
template: '<div v-once>child-two</div>'
})
var vm = new Vue({
el: '#root1',
data: {
type: 'child-two'
},
methods: {
handleBtnClick1: function () {
this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
}
}
})