Web前端入门基础知识（HTML+CSS+JS）
Web前端入门学习
HTML
一、基本语法格式
<!--声明是html格式为html 一般写在首行-->
<!DOCTYPE html>
<!--html是固定格式表示html的开始和结束-->
<html>
<!-- 声明html网页信息-->
<head>
<!--编码字符集-->
<meta charset="UTF-8">
<!-- 移动客户端优先——>
<meta name="viewport" content="width=device-width,initial-sclle=1.0">
<!--标题-->
<title>HTML标题</title>
</head>
<!--和用户交互的部分-->
<body>
</body>
</html>
注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。
<meta>用来提供相关文档信息
CSS，JS文件用<link>标签引入 并且写在<head>标签中
二、常用的一些标签
1、标签 h1~h6
这是标签h1
这是标签h2
这是标签h3
这是标签h4
这是标签h5
这是标签h6
2、段落标签p
<p></p>段落标签前后有换行效果。
3、水平线标签
<hr/> 水平线是一个自闭和标签。
4、换行
<br/> 。
5、超链接
通过<a href="http://www.baidu.com"> <a/>标签实现，使用超连接调用某个网页前面必须要加http://。
6、div
<div></div>标签可以理解为是一个盒子，用于网页的布局
7、span
<span></span>标签是一个不带任何参数的标签和在<from>表单中的<label>类似
8、表格标签table
<table></table>
<!-- 表格标签 属性border=1 添加表格边框粗细为1 -->
<!-- cellspacing="0" 使边框变只有一条线-->
<table border="1" cellspacing="0" >
<!--设置表格标题-->
<caption><h3>这是表格标题</h3></caption>
<!-- 定义行 -->
<tr >
<!---th定义列 一般写在表格首行 内容会被加粗居中-->
<th style="width: 100px;">id</th>
<th style="width: 100px;">用户名</th>
<th style="width: 100px;">年龄</th>
</tr>
<tr>
<!-- tb定义列 -->
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<caption>标签用于设置表格标题 会自动在表格上方居中显示
表格除了<table>标签以外还需要<tr>来定义行，<th>、<tb>来定义列<th>一般用于表格首行有加粗居中效果。
9、列表标签
<body>
<h3>水果</h3>
<!-- ul无序列表-->
<ul>
<li>西瓜</li>
<li>苹果</li>
<li>猕猴桃</li>
</ul>
<h3>蔬菜</h3>
<!-- ol有序列表 start代表从几开始-->
<ol start="50">
<li>西红柿</li>
<li>黄瓜</li>
<li>东瓜</li>
</ol>
</body>
10、表单Form
含义：表单就是用来提交数据到后台服务器的，比如QQ网页上的登录和注册都是提交表单的一使用
<form action="http://www.baidu.com" method="GET">
action:数据发送的服务器地址，如上就是发送给了百度
method: 请求发送方式。常用的俩种方式为： GET、POST
get：将数据追加在url末尾 ? key=value & key=value;
post：将数据写在请求体中
在from表单中，提交数据的标签必须要有 name和value 俩个属性
表单专属标签<label>类似于<span>标签 无默认样式标签
11、input
1、text代表文本框。还有一种超级文本框textrea用于输入更多内容
1、<input type="password"/>密码属性会隐藏输入内容
2、radio代表单选项，必须要有相同name属性，才可以使用组合使用单选项
<input type="radio" name="sex" value="0"/>男 <input type="radio" name="sex" value="1"/>女
3、checkbox代表多选。必须要有name属性，多个name属性的多选为一组
<input type="checkbox" name="hobby" value="0"/>唱
<input type="checkbox" name="hobby" value="1"/>跳
4、submit提交表单数据
5、reset清空表单内容
12、下拉框select
注意：name属性在select标签；value属性在option标签
来 自
<select name="city" id="">
<option value="0">请选择</option>
<option value="1">山东</option>
<option value="2">安徽</option>
<option value="3">江苏</option>
</select>
13、具有实体意义的代码
空格 :
©: ©
CSS
1、基本语法
1、行内式：<div style=" height: 200px;" ></div>
2、引入外部文件式:<link rel="stylesheet" href="css/text.css">
3、嵌入式:<style type="text/csss"> </style>
2、选择器
一、通用选择器 *
一般用于取消所有元素的内外边距和一些标签自带的字体样式
*{
padding: 0; /* 将所有元素的内间距设置为0*/
margin: 0; /* 将所有元素的外间距设置为0*/
text-decoration: none; /*通常用于去除a标签的下划线*/
}
二、类选择器 .
/* 类选择器
格式： 例：<a class="b"> <a/>
.class 修饰的类名称{ .b{
属性：值 属性：值
属性：值 属性：值
} }
三、ID选择器
/* 格式 例：<a id="c"></a>
#id修饰的名称{ #c{
属性：值 属性：值
} }
四、分组选择器
给不同名字标签设置相同属性
/*
.class,#id{
属性：值
}
*/
五、后代选择器
/*
div p{
属性：值
}
p标签是div中的子元素
3、常用属性
1、背景: background
设置背景颜色、图片背景的俩种方式
```css
body{
background: blue;
background-color: blue;
/* background: url(img/Da66niel_Wu.jpg); */
/* background-image: url(imgimg/Daniel_Wu.jpg) */
/* background-position-y: -5px; /* 设置背景图片y轴上上移5px*/
/* background-repeat: repeat; */ 默认重复 从上至下 从左到右
/* background-repeat:repeat-x; */ 背景图片在x轴上重复
/* background-repeat: repeat-y; */ 背景图片在y轴上重复
/* background-repeat: no-repeat; */ 背景图片不重复
/* 设置背景图片，并不重复，一行代码实现 */
/* background: url(imgimg/Daniel_Wu.jpg) no-repeat;
/*overflow: hidden;/* 超出标签范围内容隐藏 */
}
```
2、文本text
1、设置颜色有三种方式：
color:aqua; /* 通过颜色的英文单词名称设置*/
color: #7B68BB; /* 通过颜色代码设置*/
color:rgb(244,164,96); /* 通过rgb颜色代码设置*/
2、居中 text-align:center;
靠左text-align: left;默认靠左
靠右text-align: right;
3、文本修饰
text-decoration: none; /* 无任何线条修饰——去除超链接下划线*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*中划线*/
text-decoration-color: red; /*控制线条样式 设置线条颜色为红色*/
text-indent:20px; /* 首行缩进 */
4、文本首行缩进
text-indent:20px;或text-indent:2em; em大约为17px
3、字体
1、字体类型
font-family: '微软雅黑','宋体','黑体';设置多个字体类型浏览器会按从左到右按支持的类型选择
2、字体大小
font-size: 50px;
3、字体粗细
font-weight: 900;字体粗细取值范围是100~900的整数 bold=700、normal=900
4、列表list
list-style: none;/* 无样式*/
/* list-style: disc; 实心圆，默认样式 */
/* list-style: circle; 空心圆 */
/* list-style: square; 实心方块 */
/* list-style:decimal; 数字 */
/* list-style:decimal-leading-zero; 零开头数字 */
/* list-style: lower-roman; 小写罗马 */
/* list-style: upper-roman; 大写罗马 */
/* list-style: lower-alpha; 小写英文 */
list-style: lower-alpha; /* 大写英文 */
5、对齐方式
居中：text-align:center;
靠左：text-align:left;
靠右：text-align:right
两端对齐: text-align: justify;
1、两端对齐只有一行文字时不生效
2、两端对齐多行文字时最后一行不生效。 解决方法：使用伪元素在末尾添加空行
:after{
display:inline-block;/*将最后一行变为行内状元素*/
width: 100%;/*使用父元素的宽度*/
content: '';
}
6、display属性(块元素)
1、display定义了元素是否显示
2、display:none;表示元素不显示
3、display:block块状元素；比如div元素可以设置宽高的元素属于块状元素但是会自动换行
4、display:inline;行内元素；无法设置元素的宽/高
5、 display:inline-block;行内块元素 ，既能实现设置宽/高属性，也不会自动换行
7、边框属性border
1、border: 1px solid black; 用一条语句表示：分别是设置 边框粗细、边框样式、边框颜色
/* border-width:5px; 粗细 */
/* border-style:solid; 实线样式 */
/* border-style: none; 无样式 */
/* border-style: dotted; 点状 */
/* border-style: dashed; 虚线 */
/* border-style: double; 双实线 */
/* border-color: black; 颜色 */
/* border-radius:8px; 边框变圆角*/
8、内外间距
1、内边距：padding 外边距：margin
/*内外边距同理*/
/* margin: 20px; 代表上下左右都是20px */
/* margin: 10px 30px; 代表上下10px 左右30px; */
/* margin: 2px 10px 20px 30px; 代表从左到右为上右下左设置像素; */
/* 外间距如果只有俩个参数的情况下,第二个参数可以设置auto代表自动居中 */
/* margin: 5px auto; */
/* 上外边距20px 左外边距自动计算居中 下外边距0px 右外边距自动计算居中 */
margin: 20px auto 0 auto;
9、定位position
1、绝对定位：position:absolute
position: absolute;/*绝对定位*/
top: 100px;
left: 100px; /*设置俩个参数即可确定位置*/
2、相对定位：position:relative
让子元素对父元素进行绝对定位的时候，父元素必须设置相对定位
3、固定定位：position:fixed
相对于浏览器窗口定位，不会因为你下滑而改变位置
position: fixed;/* 相对于浏览器窗口定位*/
bottom: 50px;
right: 50px; /*设置俩个参数即可确定位置*/
10、鼠标变手势
cursor: pointer;
11、样式改变效果耗时
transition: all 0.5s;
12、行高
line-height：； 不允许使用负值
JavaScript
1、语法格式
1、行内式：<button onclick="alert('点击后的弹出框')">弹出框</button>
2、嵌入式：
<script type="text/javascript" charset="utf-8">alert('这是一个弹出框');</script>
3、引入外部文件：
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>
2、基础语法
1、var 来定义部分字符转和整数、小数
2、不能义关键字用来命名，就是js语法已经征用的单词不可以使用，否则报错
3、如何命名（标识符）：
一、支持 _ 和 & 特殊符号
二、区分大小写
三、不要以数字开头，但是支持数字
四、见名知意
五、使用驼峰或者下划线分割
六、console.() 用于打印在控制台
3、变量
变量，就是内存中用来存储数据的一个小空间
变量名也要遵循 标识符 的规则
注意：
1、若只声明而没有赋值，则该变量的值为 undefined
2、变量要有定义才能使用，若变量未声明就使用，JavaScript会报错
3、可以在同一条var命令中声明多个变量
4、若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
5、js的语法不区分双引号和单引号，但是如果出现了引号嵌套需要注意
4、数据类型
1、undefined 例： var num;声明未赋值的变量都是undefined
2、null 例：var a=null; 空值
3、boolean 例 var a=true; 布尔类型 true/false
4、number 例var a=1,b=3.14 数值类型
5、字符串 例var a=‘张三’ 字符串类型
6、函数function
5、数据类型的转换
一、转整数 全局函数parseInt();
1、纯数字的字符串转整数：parselnt('495')=495
2、数字开头加字符的字符串: parseInt('456abc')=456 只会保留数字部分丢弃其他字符
3、其他字符开头加数字的字符串：parseInt('str123')=NaN
4、小数字字符串和小数都是只保留整数部分: parseInt('3.14')=3
5、进制转换：parseInt(0xa)=10 ；16进制的10，大小写无所谓
二、转小数 全局函数parseFloat()
1、字符串转小数parseFloat("3.14")=3.14
2、数字开头加字符的字符串parseFloat("1.52ad")=1.52 只会保留数字部分丢弃其他字符
3、其他字符开头加数字的字符串：parseFloat('str123')=NaN
4、整数字符串，保留整肃部分不会自动加小数位
5、0开头的整数或字符串 parseFloat(0360598)=360598 去掉开头的0保留整肃，不会添加小数位
6、多位小数字符串parseFloat(1.23.35)=1.23 只会保留一个小数点后的有效数字
三、转字符串
1、使用toString() 注意： undefined 和 null 不能直接使用该函数 否则会报错
解决方法加 " " 或 ’ ’ 最简单的方法就是所有变量加 " " 或者 ’ ’ 都可以转为字符串
6、运算符
一、算数运算符
除了 加减乘除（+ - * /） 需要注意的是还有 求余数 %
自增和自减有两种写法
++在后： a++、a-- 表示先赋值后自增
++在前： ++a、–a 表示先自增后赋值
二、赋值运算符
x -= 1 等于 x=x-1；x * =1 等于 x = x * 1 ; x %=1 等于 x = x % 1
x +=1等于 x=x+1；x / = 1 等于 x = x / 1 ;
三、比较运算符
1、’==’ 会帮我们做简单的自动类型转换 5 == '5' true
2、’==='全等于 必须类型和值都相等才是true
3、还有常见的 大于">"、小于"<"、大于等于">="、小于等于"<="、不等于 “!=”
四、逻辑运算符
1、"&&" 短路于 并且的意思
符号俩边条件都达到的时为：true 否则非false
2、"||" 短路或 或者
符号俩边条件只要一个满足或俩个都满足时就为：true 否则false
五、三目运算符
格式： 条件表达式 ？ ture的结果 ：fales的结果
var x = 2;
var y = 5;
// x大于y吗？大于返回x，小于返回y
var result = x > y ? x : y; //接收返回值到result
console.log(result); // 在控制台打印result
7、IF判断语句
格式1 ：
if (条件表达式){ //如果条件表达式为true 则执行语句在 执行后续语句
执行语句；
} //如果条件表达式为false。执行后续语句
格式2 ：
if (条件表达式) {
true语句体;
} else {
false语句体;
}
后续代码;
格式3 ：
if (条件表达式) {
} else if (条件表达式) {
} else if (条件表达式) {
}else{//后面这个slse块可以跟具实际情况 可有可无
}
8、循环语句
格式：
/* for (初始表达式; 条件表达式; 操作初始表达式) {
语句体;
}
执行顺序：
1. 初始表达式，例如：var i = 0;
2. 执行条件表达式，例如：i < 5;
3. 如果第二步为true，执行第四步，如果第二步为false，循环结束
4. 执行语句体，然后执行第五步
5. 操作表达式，例如：i++，然后执行第二步*/
例: for (var i = 1; i <= 5; i++) {
if（i==3){
continue //表示当i=3的时候跳出当次循环，继续下次
// break 表示结束循环
}
}
9、数组
一、数组的定义
1、第一种：var 数组名 = [];定义一个空数组，未初始化值，如果要访问会返回undefined
2、第二种：var 数组名 = [值1, 值2, 值3,...]; 定义一个长度为5的数组，已初始化值
3、第三种：new Array(值1, 值2, 值3,...);定义一个长度为3的数组，已初始化值
4、第四种：new Array(长度);定义一个长度为5的数组，未初始化值，如果要访问会返回undefined
注意：
1、 数组的获取：格式 数组名[下标]；第一位：从0开始，最后一位：length-1
2、js的数组没有越界的概念，js的数组可以随意更改长度
二、数组的遍历 即获取数组中所有数据 使用for循环
var arr5 = [1, 3.14, true, null, "学习"];
for (var i = 0; i < arr5.length; i++) {
console.log("arr5[" + i + "] = " + arr5[i]);
}
10、函数
一、函数的定义
/*
格式1：
function 函数名([形参]){
语句体；
return 返回值；
}
格式2：
var 函数名=function([形参]){
语句体；
return 返回值；
if（ 条件表达式）{
return； //注意 在函数if中添加return当条件表达式为flase时结束函数
}
}
调用：
函数名([实参]);
*/
11、内置对象String
var str='我是一个字符串';
一、charAt(idx):指定位置字符
str.charAt(1);// "是"
二、indexOf(chr)定字符串的位置
返回指定字符串的位置，从左到右。找不到返回-1
str.indexOf("我") //"0"
三、substr(m,n):
返回给顶字符串从m位置开始，取n个字符，如果参数n省略。则意味着取全部
str.substr(2,2);//“一个”
四、substring:
返回给定字符串中从2开始，到3位置结束但不包括第3位。如果参数n省略。则意味着取全部
substring(2,3);//“一”
五、tolowerCase():转小写
str='SHSXT' str.toLowerCase()；//“shsxt”
六、toUpperCase();转大写
str='shsxt' str.toUpperCase(); //“SHSXT”
七、replace(s1,s2): 替换
将s1替换为s2 str='shsxt' str.replace('sh','bj'); //“bjsxt”
12、内置对象Math
1、随机数
Math.random();生成随机数，生成0到1的小数
2、上取整
`Math.ceil()` 向上取整 `Math.ceil(0.00001)`=1
3、下取整
Math.floor()向下取整 Math.floor(0.99999)=0
4、四舍五入
Math.round()四舍五入取整，只对小数点后一位进行四舍五入 Math.round(3.19)=3
例； 随机产生0到26的数
Math.floor (Math.random()*27)
产生0~1的数乘以27在向下取整可达到产生随机数0到26
13、内置对象Date
创建时间对象var date = new Date();
一、获取年
date.getFullYear()
二、获取月
date.getMonth() + 1
三、获取日
date.getDate()
四、获取星期
date.getDay()
五、获取分
getMinutes()
六、获取秒
getSeconds()
七、获取本地时间
toLocaleString()
八、set更改时间
设置日期时间，设置时间为2008奥运
date.setFullYear(2008);
date.setMonth(7);
date.setDate(8);
date.setHours(20);
date.setMinutes(8);
date.setSeconds(8);
console.log(date.toLocaleString());
14、BOM对象
一、系统对话框
1、消息框：
alert(123);
2、输入框：
prompt(‘请输入年龄’，20)；第二参数为默认值 可有可
3、确认框：
confirm(‘确认要更改么’)‘’
例子：
var result=confirm('确认要修改么');
//如果点确认，修改div文本的颜色，否则给个警告
if(result){
var dv=document.getElementById('dv');
dv.style.color='blue';
}else{
alert('没事别瞎点');
}
二、打开窗口
open('http://www.baidu.com', '_block') block：新窗口打开 默认值
三、时间函数
1、setTimeout
setTimeout(函数,时间毫秒) 多少秒后执行函数
// setTimeout 5s后打印 settimeout(函数,时间毫秒);
var num = 1;
var result1 = setTimeout(function () {
console.log("打印内容");
}, 5000);
2、setInterval
setInterval(函数,时间毫秒) 多少秒执行一次
//setInterval 每秒打印一次
var result2 = setInterval(function () {
console.log("打印内容");
}, 1000);
注意： 时间函数调用后会返回一个停止时间函数的数值
//时间函数调用后会返回一个停止时间函数的数值
function stopTime() {
clearTimeout(result1);
clearInterval(result2); //停止时间函数
}
练习：将当前时间获取到设置div 并且为整数时，修改颜色红色
var dv1 = document.getElementById("dv1"); //通过dvi的id与他关联
setInterval(function () {
//new Date().gerSeconds() 获取当时秒数
if (new Date().getSeconds() % 10 == 0) {
dv1.innerHTML = "<h1 style='color:red;'>" + new Date().toLocaleString() + "</h1>";
} else {
dv1.innerHTML = "<h1>" + new Date().toLocaleString() + "</h1>";
}
}, 1000);
四、location
1、reload 刷新页面 location.reload();
2、href 改变当前页面网址 location.href="http://www.baidu.com";
15、事件on
一、onload 页面加载
// 第一种，使用匿名函数，默认加载body
// onload =function(){
// document.getElementById('dv').style.color='blue';
// }
//第二种 使用具体函数
function init(){
var dv=document.getElementById('dv');
console.log(dv);
dv.style.color='red';
}
// <body οnlοad="init();">
二、onClick点击
三、焦点事件
1、获取焦点：onfocus
2、失去焦点：onblur
四、鼠标事件
1、鼠标移入：onmouseover
2、鼠标移出: onmouseout
3、鼠标在范围内移动：onmousemove
五、键盘事件
1、键盘按下：onkeyup
2、键盘抬起：onkeydown
六、改变域内容事件
onchange 例如下拉框的选择
七、事件处理方式
HTML事件处理方式 / DOM事件处理方式
DOM事件处理方式，动态的方式绑定，方便代码的维护
16、DOM对象
一、获取节点
1、根据id获取，返回单个对象 document.getElementById( );
2、根据name获取，返回多个对象 数组 document.getElementsByName();
3、根据标签名获取，返回多个对象 数组document.getElementsByTagName();
4、根据class获取元素document.getElementsByClassName();
二、对象属性操作
<button type="button" id="btn">测试按钮</button><br />
<input type="text" value="加油，胜利就在眼前" id="txt" class="test" />
<br />
性别：
<input type="radio" checked="true" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br />
<img src="img/timg.jpg" style="width: 200px;" id="sxtimg" title="sxt" />
1、获取文本
var txt = document.getElementById('txt');
// 根据属性获取文本
console.log(txt.value);
// 根据函数获取文本
console.log(txt.getAttribute('value'));
--------------------------------------------------------------------------------------
//设置文本
// 根据属性设置文本
txt.value = '我是新文本';
// 根据函数设置文本
txt.setAttribute('value', '我是第二次设置的新文本');
2、获取属性
var txt = document.getElementById('txt');
// 根据属性获取
// 获取id属性
console.log(txt.id);
// 获取class属性
console.log(txt.className);
// 获取type属性
console.log(txt.type);
// 根据函数获取
console.log(txt.getAttribute('id'));
console.log(txt.getAttribute('class'));
console.log(txt.getAttribute('type'));
--------------------------------------------------------------------------------------
// 根据属性设置
//txt.id = 'newId';
//txt.className = 'newClass';
//txt.type = 'password';
// 根据函数设置
txt.setAttribute('id', 'newId2');
txt.setAttribute('class', 'newClass2');
txt.setAttribute('type', 'password');
3、获取是否选中*
console.log(sex.checked);// 返回true false
console.log(sex.getAttribute('checked'));// 有，返回具体的值或者没有，返回null
---------------------------------------------------------------------------------------
// 根据属性设置
//sex.checked = true;
// 根据函数设置
sex.setAttribute('checked', 'true');
4、获取样式
function getStyle() {
var sxtimg = document.getElementById('sxtimg');
// 根据属性获取
console.log(sxtimg.style.width);
// 根据函数获取
console.log(sxtimg.getAttribute('style'));
// 根据属性设置，设置的是其中一个样式，属于样式的添加，建议使用属性操作
//sxtimg.style.cursor = 'pointer';
// 根据函数设置，设置的是全部样式，属于样式的覆盖
sxtimg.setAttribute('style', 'cursor: pointer');
}
// 将自定义函数绑定至按钮
document.getElementById('btn').onclick = getStyle;
三、元素的创建和插入
//添加段落//
//函数的方式创建
function testCreateElementByFunc() {
var p = document.createElement('p')
var txt = document.createTextNode('我是一个p元素');
var vd = document.getElementById('dv');
p.appendChild(txt);
dv.appendChild(p);
}
//属性的方式创建
function testCrerteElenentByAttr() {
var dv = document.getElementById('dv');
dv.innerHTML = '<p>属性添加的p元素</p>'
}
---------------------------------------------------------------------------------------
// 添加图片//
//函数的方式创建
function testCreateImgByFunc() {
var myImg = document.createElement('img');
var dv = document.getElementById('dv');
dv.appendChild(myImg);
//myImg.setAttribute("src",'img/Daniel_Wu.jpg');
myImg.src = 'img/Daniel_Wu.jpg';
}
//属性的方式创建
function testCreateImgByAttr() {
var dv = document.getElementById('dv');
dv.innerHTML = '<img src="img/Daniel_Wu.jpg" style="width:300px;"/>';
}
---------------------------------------------------------------------------------------
// 文本框//
//函数的方式添加
function testCrerteElementByFunc() {
var inp = document.createElement('input');
inp.setAttribute('value', '我是一个文本框');
inp.setAttribute('type', 'password');
var div = document.getElementById('dv');
dv.appendChild(inp);
}
//属性的方式添加
function testCreateElementAyAttr(){
var div=document.getElementById('dv');
dv.innerHTML='<input value="我是一个文本框" type="password"/>';
}
---------------------------------------------------------------------------------------
// 选项框//
//函数的方式添加
function testCreateElementByFunc(){
var opt=document.createElement('option');
var txt=document.createTextNode('南山南');
var sel=document.getElementById('mySelect');
opt.appendChild(txt);
opt.setAttribute('value','3');
//第二种方法
sel.options.add(opt);
}
//属性的方式创建
function testCreateElementByAttr(){
//获取select
var sel=document.getElementById('maSelect');
/*
sel.innerHtML='<optinon value="0">------请选择----</option>' +
'<option value="1">喜欢你</option>' +
'<option value="2">飘向北方</option>' +
'<option value="3">南山南</option>';
*/
sel.innerHTML +='<option value="3">南山南</opyion>';
}
四、间接查找节点
1、childNodes；子查询节点集合 返回子节点为数组 格式：父节点.childNodes
2、parentNode; 返回元素的父节点 格式: 元素.parentNode
2、firsthChild;返回元素的第一个子节点 格式:父节点.firstChild
3、lastChild; 返回元素的最后一个子节点 格式： 元素.lastChild
4、previousSiblinl;返回上一个兄弟节点 格式：元素.previousSiblinl
5、nextSibling；返回下一个兄弟节点 格式: 元素.nextSibling
五、节点删除
<div id="dv">
<span id="cxy">程序猿|程序媛|攻城狮</span>
<a href="javascript:void(0)" onclick="delNode();">删除</a>
</div>
注：href="javascript:void(0)" 使a标签失去跳转功能
方法1：父节点.removeChild.子节点
var dv=document.getElementById('dv');
var cxy=document.getElementById('cxy');
dv.removeChild(cxy);
方法2：cxy.parentNode.removeChild(cxy)
var cxy=document.getElementById('cxy');
cxy.parentNode.removeChild(cxy);
推荐阅读
-
Web前端入门基础知识（HTML+CSS+JS）
-
web前端基础知识，html+css
-
入门html+css+js，哪里能找到比较适合学习的源码_html/css_WEB-ITnose
-
Angular 4.0从入门到实战 博客分类： Web前端
-
Angular 4.0从入门到实战 博客分类： Web前端
-
web前端高级React - React从入门到进阶之使用PropTypes进行类型检查
-
web前端入门之html+css实例④之浮动（float与inline-block）
-
Web前端（二）:JavaScript入门基础、类型、变量
-
入门html+css+js，哪里能找到比较适合学习的源码_html/css_WEB-ITnose
-
Web前端开发入门不得不看