4 HTML&JS等前端知识系列之Dom的基础
preface
主要聊聊dom的编程,包含下面的内容:
- what's the dom
- dom选择器
- innerText 替换或写入文本
- value 获取input,select,textarea的值
- 数字+1的实例
- innerHTML,innerText,
- onfocus onblur value if判断 实践之输入框提示语的显示与隐藏
- innerHTML insertAdjacentHTML createElement 实践之添加文本框
- setAttribute getAttribute 标签属性的设置与获取
- submit() submit 提交表单的两种方式
- 检测表单是否有内容
- confirm 获取弹框的确认值
- window.location相关方法
- setTimeout和setInterval 设置定时任务与标题滚动
what's the dom
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
DOM 是 Document Object Model(文档对象模型)的缩写。
dom选择器
- 根据html标签选择
tags = document.getElementsByTagName('h2');
- 根据class的名字选择
document.getElementsByClassName('hehe')
- 根据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,
- innerText 获取标签之间的内容
- innerHTML 获取标签之前的html代码
value获取input,select,textarea的值
但是对于input,select,textarea这三个标签,需要使用value来获取值
- xx.value 获取值
- 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代码
- onfocus是鼠标点击输入框触发的事件
- 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 标签属性的设置与获取
- setAttribute 设置属性
- 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相关方法
- window.location.href 显示当前的连接
- 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的基础的更多相关文章
- 3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...
- 8 HTML&JS等前端知识系列之jquery的自定义方法
preface 有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子.先说说2种自定义方法的区别: 不跟在选择器后面的 跟在选择器后面的. 那下面说说如何自定义jquer ...
- 5 HTML&JS等前端知识系列之jquery基础
preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...
- 8 HTML&JS等前端知识系列之Ajax的例子
what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
- 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求
我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- [C# 基础知识系列]专题六:泛型基础篇——为什么引入泛型
引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...
- 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- JS前端知识模块大全
公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...
随机推荐
- ICompare接口、Sort()方法
1.接口中的方法并不实现具体功能,继承于该接口的类必须实现具体功能. 核心思想:对修改封闭,对扩展开放. 2.Sort()方法: 默认:Sort(内容) 英文:按照首字母顺序排序,首字母相同则看第二个 ...
- Mysql zip包在Windows上安装配置
环境:Windows7 64位系统.mysql-5.7.16-winx64.zip 1.在mysql官网上下载所需的mysql zip包,如我下载的是mysql-5.7.16-winx64.zip: ...
- 带你一步步的了解“C#事件”机制
是什么 本文讨论类型中定义的最后一种成员:事件 定义了时间成员的类型允许类型通知其他对象发生了特定的事情. 具体的说,定义了时间成员的类型能提供以下功能: 方法能登记它对事件的关注 方法能注销它对事件 ...
- PHP实现堆排序
经验 工作了,面试我工作这家公司时被技术面打击得不行,因为自己的数据结构等基础学得实在太差,虽然原来是想做设计师的说...不过看在PHP写得还凑合的份上能来实习了,但还是决心恶补一下基础. 其实自己之 ...
- BOOST.Asio——扫盲
以下内容来自互联网. 鉴于版权之类的东西,我只贴出标题和URL. (无法考证下述资料是否原创.) asio串口编程 ...
- html iframe 元素之间的调用
html iframe 元素之间的调用一.简介 一般需要引入一个独立页面的时候,我们会使用iframe.在业务需要的时候,我们需要在父页面与iframe页面之间进行交互.交互的时候,我们就需要使 用到 ...
- Hibernate注解----类级别注解以及属性注解详解----图片版本
这篇文章是我在慕课网上学习Hibernate注解的时候进行手机以及整理的笔记. 今天把它分享给大家,希望对大家有用.可以进行收藏,然后需要的时候进行对照一下即可.这样能起到一个查阅的作用. 本文主要讲 ...
- 业务监控-指标监控(v1)
最近做了指标监控系统的后台,包括需求调研.代码coding.调试调优测试等,穿插其他杂事等前后花了一个月左右. 指标监控指的是用户通过接口上传某些指标信息,并且通过配置阈值公式和告警规则等信息监测自己 ...
- WPF 依赖属性
依赖属性,简单的说,在WPF控件应用过程中,界面上直接可以引用的属性 如:<Button Content="aaa"></Button> Content称为 ...
- 超详细的java反射教程
看技术博客时,看到关于java反射的博文,写的非常好.猛击下面的地址,开始java反射之旅 中文翻译地址:http://ifeve.com/java-reflection/ 英文原版地址:http:/ ...