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

简介: 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部分下次更新


相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
79 4
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
22 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
38 4
|
3月前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
26 5