preface

主要聊聊dom的编程,包含下面的内容:

  1. what's the dom
  2. dom选择器
  3. innerText 替换或写入文本
  4. value 获取input,select,textarea的值
  5. 数字+1的实例
  6. innerHTML,innerText,
  7. onfocus onblur value if判断 实践之输入框提示语的显示与隐藏
  8. innerHTML insertAdjacentHTML createElement 实践之添加文本框
  9. setAttribute getAttribute 标签属性的设置与获取
  10. submit() submit 提交表单的两种方式
  11. 检测表单是否有内容
  12. confirm 获取弹框的确认值
  13. window.location相关方法
  14. setTimeout和setInterval 设置定时任务与标题滚动

what's the dom

DOM 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准:

文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

  1. 核心 DOM - 针对任何结构化文档的标准模型
  2. XML DOM - 针对 XML 文档的标准模型
  3. HTML DOM - 针对 HTML 文档的标准模型

    DOM 是 Document Object Model(文档对象模型)的缩写。

dom选择器

  1. 根据html标签选择
tags = document.getElementsByTagName('h2');
  1. 根据class的名字选择
document.getElementsByClassName('hehe')
  1. 根据ID来选择
document.getElementById('ljf')
innerText 替换或写入文本
var nid = document.getElementById('ljf')
nid.innerText='yq'

innerText for循环修改

html代码

<ul>
<li>h1</li>
<li>h1</li>
<li>h1</li>
<li>h1</li>
<li>h1</li>
</ul>

js代码

var lis = document.getElementsByTagName('li');
for ( var i in lis){
var xx = lis[i];
xx.innerText=i;
}

数字+1的实例

在html页面上点击+1按钮,实现页面动态加1

html代码

<span id="num">1</span></p>
<input type="button" value="+1" onclick="add_one();">

js代码

function add_one() {
var num = parseInt(document.getElementById('num').innerText);
num +=1;
document.getElementById('num').innerText = num
}

innerHTML,innerText,

  1. innerText 获取标签之间的内容
  2. innerHTML 获取标签之前的html代码

value获取input,select,textarea的值

但是对于input,select,textarea这三个标签,需要使用value来获取值

  1. xx.value 获取值
  2. xx.value = '' ; 获取值

html代码

    <input type="button" onclick="GetValue();" value="获取值">
<input id="n2" type="text"/>
<select id="n3">
<option>北京</option>
<option>北京2</option>
<option>北京3</option>
</select>
<textarea id="n4">1111111</textarea>

js的代码

    function GetValue() {
var obx = document.getElementById('n2');
var obx2 = document.getElementById('n3');
var obx3 = document.getElementById('n4');
console.log(obx.value,obx2.value,obx3.value) }
再看一个例子:value 获取input的值

html代码:

<form>
<p>用户名:<input name="username" value="123"></p>
<p>密码:<input name="pwd" value="456"></p>
</form>

js代码:

var name = document.getElementsByName('username')[0];
var pwd = document.getElementsByName('pwd')[0];
console.log(pwd);
console.log(name);
console.log(name.value,pwd.value)

onfocus onblur value if判断 实践之输入框提示语的显示与隐藏

需求就是在我们鼠标点中搜索输入框的时候,提示语消失,然后鼠标离开输入框,点击其他地方的时候,提示语显示。

下面请看html代码

  1. onfocus是鼠标点击输入框触发的事件
  2. onblur是鼠标点击非输入框的事件,意味着离开了输入框。

html代码

<input type="text" id="search" value="请输入关键字" onfocus="Ff()" onblur="bb()">

js代码

script>
function Ff(){
var nid = document.getElementById('search');
var search_cont = nid.value; # 获取输入框的值
if(search_cont == "请输入关键字"){
nid.value = ''; //通过value来设置新的值
}
};
function bb() {
var nid = document.getElementById('search');
var xx = nid.value;
if(!xx.value){
nid.value = "请输入关键字"
}
}
</script>

innerHTML insertAdjacentHTML createElement 实践之添加文本框

我们在这里使用的a标签作为添加按钮,这就是涉及到一个问题,我们知道a标签默认有一个事件在点击它的时候,此时我们还需要额外给她增加一个触发时间,请看代码:

html代码

<a href="#" onclick="return addtag()">添加</a>

请看 onclick="return addtag()"里面的return,这里return一个false,同时addtag()里面还得return一个false这个,那么a标签自带的事件就不会触发,return true那就会触发。

下面请看详细js代码:

<script>
function addtag() {
var nid = document.getElementById('container');
var tag = "<input type='text'>";
nid.innerHTML=tag;
return false
}
</script>

此时,点击网页上添加按钮,永远都只有一个输入框,为啥呢?应该是我点击一个添加按钮,那么就增加一个输入框啊。关键点在于innerHTML这个,因为innerHTML是把原来的值给覆盖了,永远都是覆盖以前的值,所以才这样。所以如果点击一下添加就添加一个输入框,那么应该采用insertAdjacentHTML,如下所示,

创建标签的第一种方式,通过自定义文本内容来创建:

JS代码如下

<script>
function addtag() {
var nid = document.getElementById('container');
var tag = "<input type='text'>";
//nid.innerHTML=tag //注释掉之前的
container.insertAdjacentHTML('beforeBegin',tag); // 启用这个就是了,无线增加输入框
return false
}
</script>

还可以参考创建标签的第二种方式,通过设置属性来创建:

    function addtag() {
var nid = document.getElementById('container');
var create_obj = document.createElement('a');
create_obj.href="http://www.cnblogs.com/liaojiafa"; //设置a标签属性
create_obj.innerText = "温柔易淡";
nid.appendChild(create_obj)
}

setAttribute getAttribute 标签属性的设置与获取

  1. setAttribute 设置属性
  2. getAttribute 获取属性

如下所示,以下操作在浏览器console窗口操作:

var nid = document.getElementById('container');
undefined
nid.setAttribute('name','hello')
undefined
nid.getAttribute('name')
"hello"

为什么不能够直接使用nid.name来设置标签呢?因为name不是所有标签自带的属性,某些自带name标签的才可以这么设定。

通过nid.XX这种方式设置属性来举个例子

  var nid = document.getElementById('hehe');
nid.style.fontSize='33px' # Size的s必须大写

像上面说的,style里面的一些带有“-”的值,必须把“-”去除掉,然后把“-”后的首字母大写,如background-color,必须写成backgroundColor

submit() submit 提交表单的两种方式

  • 采用最常用的submit按钮。

html代码代码如下:

<form action="https://www.sougou.com/web" method="get" id="form1">
<input name="query" type="text">
<input type="submit" value="search"/>
</form>
  • 采用document的submit方法
<form action="https://www.sougou.com/web" method="get" id="form1">
<input name="query" type="text">
<a onclick="submitx()">search</a>
</form>
<script>
function submitx() {
document.getElementById('form1').submit(); // submit方法提交
}
</script>
检测表单是否有内容

需求就是检测输入框是否有内容,有才提交,如果没有那么不提交。

html代码

<form action="https://www.sougou.com/web" method="get" id="form1">
<input name="query" type="text">
<input type="submit" onclick=" return MySubmit();" value="提交">
</form>

JS代码

    function MySubmit() {
var cont = document.getElementsByName('query')[0]; //获取输入框的内容
if(cont.value.trim()){ # 判断,有内容返回true
return true
}else{
alert('please enter something')
return false
}
}

confirm 获取弹框的确认值

javascript的弹框,可以使用confirm来获取用户选择的值,确定为true,取消为false。

html代码如下:

<input type="button" value="fuck me " onmouseover="myconfirm()">

js代码如下:

    function  myconfirm() {
var ret = confirm("welcome to http://www.cnblogs.com/liaojiafa/"); // confirm就是获取弹框的值。
console.log(ret)
}

window.location相关方法

  1. window.location.href 显示当前的连接
  2. window.location.reload 重新加载网页

setTimeout和setInterval 设置定时任务与标题滚动

setInterval方法,指定某个函数每隔多长之间执行一次,如下所示

        setInterval('alert(123)',2000);    //2000毫秒

下面说说借助定时功能来做标题的滚动:

直接查看js代码

    ss = setInterval("Func()",1000);  //ss为全局变量,其实也是一个句柄,SS这个变量名就现在的情况可加可不加。
function Func(){
var title = document.title;
var firstchar = title.charAt(0); // cahrAt,获取指定下标的元素在字符串里面
var subText = title.substring(1,title.length); //substring,获取指定下标字符串内容
var newtitle = subText + firstchar; // 拼接新标题
document.title = newtitle
}

此时需求又来了,要求能够手动控制标题的滚动,点击下stop按钮,就能够停止滚动,那么修改代码如下:

HTML代码

<input type="button" value="stop" onclick="stopInterval()">

JS代码

    ss = setInterval("Func()",1000);  //ss为全局变量,其实也是一个句柄,必须把setInterval赋值给一个变量名

    function stopInterval() {
clearInterval(ss); // 添加这段代码就行了,意思就是清除这个句柄,就关闭了它。
} function Func(){
var title = document.title;
var firstchar = title.charAt(0); // cahrAt,获取指定下标的元素在字符串里面
var subText = title.substring(1,title.length); //substring,获取指定下标字符串内容
var newtitle = subText + firstchar; // 拼接新标题
document.title = newtitle
}

烦人的产品经理又来了,说我们有个需求,要求某某个弹框几秒之内自动消除,好,那么就上面的基础说说这个功能:

setTimeout,表示多长时间之后执行一次这个函数。

    ss = setTimeout("Func()",1000);    //和setInterval一样的用法,传入函数名和时间,都是毫秒

    function stopInterval() {
clearTimeout(ss) //对应的,这里使用clearTimeout来清除这个句柄。
}
function Func(){
var title = document.title;
var firstchar = title.charAt(0);
var subText = title.substring(1,title.length); //substring,获取指定下标字符串内容
var newtitle = subText + firstchar;
document.title = newtitle
}

4 HTML&JS等前端知识系列之Dom的基础的更多相关文章

  1. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  2. 8 HTML&JS等前端知识系列之jquery的自定义方法

    preface 有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子.先说说2种自定义方法的区别: 不跟在选择器后面的 跟在选择器后面的. 那下面说说如何自定义jquer ...

  3. 5 HTML&JS等前端知识系列之jquery基础

    preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...

  4. 8 HTML&JS等前端知识系列之Ajax的例子

    what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  5. 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求

    我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...

  6. 7 HTML&JS等前端知识系列之jquery的事件绑定

    preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...

  7. [C# 基础知识系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  8. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  9. JS前端知识模块大全

    公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...

随机推荐

  1. ICompare接口、Sort()方法

    1.接口中的方法并不实现具体功能,继承于该接口的类必须实现具体功能. 核心思想:对修改封闭,对扩展开放. 2.Sort()方法: 默认:Sort(内容) 英文:按照首字母顺序排序,首字母相同则看第二个 ...

  2. Mysql zip包在Windows上安装配置

    环境:Windows7 64位系统.mysql-5.7.16-winx64.zip 1.在mysql官网上下载所需的mysql zip包,如我下载的是mysql-5.7.16-winx64.zip: ...

  3. 带你一步步的了解“C#事件”机制

    是什么 本文讨论类型中定义的最后一种成员:事件 定义了时间成员的类型允许类型通知其他对象发生了特定的事情. 具体的说,定义了时间成员的类型能提供以下功能: 方法能登记它对事件的关注 方法能注销它对事件 ...

  4. PHP实现堆排序

    经验 工作了,面试我工作这家公司时被技术面打击得不行,因为自己的数据结构等基础学得实在太差,虽然原来是想做设计师的说...不过看在PHP写得还凑合的份上能来实习了,但还是决心恶补一下基础. 其实自己之 ...

  5. BOOST.Asio——扫盲

    以下内容来自互联网. 鉴于版权之类的东西,我只贴出标题和URL. (无法考证下述资料是否原创.) asio串口编程                                            ...

  6. html iframe 元素之间的调用

    html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...

  7. Hibernate注解----类级别注解以及属性注解详解----图片版本

    这篇文章是我在慕课网上学习Hibernate注解的时候进行手机以及整理的笔记. 今天把它分享给大家,希望对大家有用.可以进行收藏,然后需要的时候进行对照一下即可.这样能起到一个查阅的作用. 本文主要讲 ...

  8. 业务监控-指标监控(v1)

    最近做了指标监控系统的后台,包括需求调研.代码coding.调试调优测试等,穿插其他杂事等前后花了一个月左右. 指标监控指的是用户通过接口上传某些指标信息,并且通过配置阈值公式和告警规则等信息监测自己 ...

  9. WPF 依赖属性

    依赖属性,简单的说,在WPF控件应用过程中,界面上直接可以引用的属性 如:<Button Content="aaa"></Button> Content称为 ...

  10. 超详细的java反射教程

    看技术博客时,看到关于java反射的博文,写的非常好.猛击下面的地址,开始java反射之旅 中文翻译地址:http://ifeve.com/java-reflection/ 英文原版地址:http:/ ...