JavaScript基础-DOM的一些基本常用语法

总结了一下JS一直到DOM中所用的单词的用法
输入方式:

window.prompt('请输入数据');


输出方式:
1、window.alert('Hello JavaScript');
2、console.log输出到控制台
3、输出数据到页面document.write('hello')


JavaScript数据类型
1、基本类型
string:字符型
number:数值型
boolean:布尔型


2、特殊类型
undefined:未初始化
null:空值


3、复杂类型
Array:数组
Object:对象


4、数据类型的判定
isNaN()判断不是数字(返回值为布尔型)
typeof :判定具体类型
对数组的操作
length:获取数组的长度
push():添加元素到末尾
unshift():添加元素到开始
pop():删除最后一个元素
shift()删除第一个
splice()删除指定的1至多个元素
slice()数组元素的截取
cancat()数组元素的合并
reverse()数组的反转
sort()数组的排序

5、数组与字符串类型的相互转换
toString()数组转换为字符串
toFixed(count):数值转换为字符串,并保留小数点后一定位数
split():字符串转换为数组


6、创建方式
new Object():创建对象
new Date():创建日期对象

7、对字符进行操作

new String():创建字符串对象
toLowerCase():把字符串转换为小写
toUpperCase()把字符串转换为大写
charAt(index):返回字符串中指定下标的字符 (index是字符位置,从0开始)
charCodeAt(index):返回字符串中指定索引(位置)的字符 unicode 编码
indexOf(findstr,index):返回指定文本在字符串中首次出现的索引(位置)
lastIndexOf(findstr,index):返回指定文本在字符串中最后一次出现的索引(位置)
search(findstr)搜索特定值的字符串,并返回匹配位置


8、提取部分字符串
slice(start, end)
substring(start, end)
substr(start, length)

trim()删除前后空白
concat(str1,str2,...,strN):连接两个或多个字符串
split(bystr):拆分字符串
replace(findstr,tostr):替换字符串

9、算数对象
Math.PI:圆周率
Math.round(x):返回的值是对x的小数点后面的数进行四舍五入。
Math.pow(x, y):返回值是 x 的 y 次幂。
Math.sqrt(x):返回 x 的平方根
Math.abs(x):返回 x 的绝对值
Math.ceil(x):返回值是 x 上舍入最接近的整数
Math.floor(x):返回值是 x 下舍入最接近的整数
Math.min():查找参数列表中的最低值
Math.max():查找参数列表中的最高值
Math.random():返回介于 0(包括) 与 1(不包括) 之间的随机数

10、日期对象的获取方法:
getTime() 或 valueOf()  返回1970 年 1 月 1 日至今的毫秒数  
getFullYear():获取四位的年(yyyy)               
getMonth():获取月(011)                     
getDate():以数值返回一个月中的某一天(131) 
 getDay():以数值返回一周中的某一天(06)   
getHours():获取小时(023)     
getMinutes():获取分(059)   
getSeconds():获取秒(059) 
getMilliseconds():获取毫秒(0999)

DOM


一、获取元素
document.getElementById(id):获取ID元素
document.getElementsByTagName('标签名'):根据标签名获取元素
document.getElementsByClassName('类名'):根据类名获取元素
document.getElementsByName('名称'):根据名称获取元素
document.querySelectorAll('选择器'):根据指定选择器获取所有元素(H5新增)
document.querySelector('选择器'):根据指定选择器获取第一个元素(H5新增)
document.body:返回body元素对象。
document.documentElement:返回html元素对象。

二、获取/改变元素内容
innerText:普通元素的内容操作(不识别html标签)
innerHTML:普通元素的内容操作

vlaue="":表单元素的内容操作
type、disabled、checked、selected、readOnly等="":表单元素的属性操作

三、样式属性操作
style:获取设置元素对象的样式属性值
className获取设置元素对象的样式属性值


四、自定义属性
getAttribute('属性名'):获取元素对象的自定义属性值
setAttribute('属性名',值):设置元素对象的自定义属性值
removeAttribute('属性名'):移除元素对象的自定义属性值

五、根据层次关系获取节点
 childNodes          返回子节点集合。它返回所有的子节点,包括元素节点,文本节点等。
 parentNode          返回节点的父节点。
 firstChild          返回第一个子节点。
 lastChild           返回最后一个子节点。
 previousSibling     返回上一个兄弟节点。 
 nextSibling         返回下一个兄弟节点。
 children                返回子元素节点集合。
 firstElementchild       返回第一个子元素节点。     
 lastElementchild        返回最后一个子元素节点。 
 previousElementsibling  返回上一个兄弟元素节点。 
 nextElementsibling      返回下一个兄弟元素节点。

六、获取节点信息
nodeName:节点名称
nodeValue:节点值
nodeType:节点类型

七、创建/添加/删除/替换/复制节点
document.createElement('tagName'):创建节点
node.appendChild(child):追加
node.insertBefore(child, refChild):插入
node.removeChild(refChild):删除节点
node.replaceChild(newChild, oldChild):替换节点
node.cloneNode():复制节点

八、事件的绑定
事件名(带on) = "javascript函数名(参数)":行内绑定
元素对象.事件名(带on) = 匿名函数:动态绑定
元素对象.事件名(带on) = 函数名; 或 元素对象['事件名(带on)'] = 函数名:动态绑定
元素对象.addEventListener('事件名(不带on)', 匿名函数):事件监听(IE9及以上支持)
元素对象.attacheEvent('事件名(带on)', 匿名函数):事件监听(IE8及以下支持)

九、事件的解绑
1、传统注册方式的解绑
元素对象.事件名(带on) = null; 或 元素对象['事件名(带on)'] =null;
2.监听注册方式的解绑
(1.元素对象.removeEventListener('事件名(不带on)', 函数名); //IE9及其以上才支持
(2.元素对象.detacheEvent('事件名(带on)', 函数名); //IE8及其以下才支持

十、常用事件
 onclick   用户点击 HTML 元素。即鼠标点击左键触发。                 
    
 onload        浏览器已完成页面的加载。即浏览器完成页面的加之后自动触发该事件。最常用于 <body> 元素中,其他支持onload的标签还有:<frame>,<frameset>,<iframe><img>, <link>, <script>。(写在body标签中;在JavaScript代码中绑定;以监听方式绑定("load"))。 
 onchange      HTML 元素改变。比如用户修改了表单的内容之后触发该事件。onchange属性可以使用于: <input>, <select>和 <textarea>。 
 onfocus:获得鼠标焦点触发。就是当光标落在文本框中时发生的事件。       
 onblur:失去鼠标焦点触发。就是当光标离开文本框中时发生的事件。       
 onmouseenter:鼠标进入元素瞬间触发,只触发一次。在元素的子元素之间相互切换不会触发。 
 onmouseleave:鼠标离开元素瞬间触发,只触发一次。在元素的子元素之间相互切换不会触发。 
 onmouseover:鼠标进入元素瞬间触发,会触发多次。在元素的子元素之间相互切换会不断触发。 
 onmouseout:鼠标离开元素瞬间触发,会触发多次。在元素的子元素之间相互切换会不断触发。 
 onkeypress:用户按下键盘按键后触发。功能键(箭头、符号、F1F12、Ctrl、Shift等)不会触发。 
 onkeydown:用户按下键盘按键后触发。所有按键皆会触发。                   
 onkeyup:用户松开键盘按键后触发。所有按键皆会触发。                   

十一、事件对象的属性和方法
e.target:返回事件源(标准浏览器)
e.srcElement:返回事件源(非标准浏览器,在 IE6~8 中)
e.type:返回事件类型
e.stopPropagation():阻止事件冒泡(标准浏览器)
e.cancelBubble:阻止事件冒泡(非标准浏览器,在 IE6~8 中,true)
e.preventDefault():阻止默认事件(标准浏览器)
e.returnValue:阻止默认事件(非标准浏览器)

十二、鼠标事件对象的属性
 e.clientX  :返回鼠标相对于浏览器窗口可视区的X坐标     
 e.clientY  :返回鼠标相对于浏览器窗口可视区的Y坐标     
 e.pageX    :返回鼠标相对于文档页面的X坐标(IE9+支持) 
 e.pageY   : 返回鼠标相对于文档页面的Y坐标(IE9+支持) 
 e.ScreenX : 返回鼠标相对于电脑屏幕的X坐标             
 e.ScreenY  :返回鼠标相对于电脑屏幕的Y坐标       

十三、键盘事件对象的属性
keyCode:返回按键的ASCII码值      

以上就是大致到DOM的词汇,BOM部分下次更新

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值