js

最新推荐文章于 2024-05-09 09:46:21 发布

console_log_LGA

最新推荐文章于 2024-05-09 09:46:21 发布

阅读量119

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/console_log_LGA/article/details/99694309

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javascript的组成：
1,ECMAScript 主要是一些语法相关
2,BOM 浏览器对象模型
3,DOM 文档对象模型
div1.οnclick=function(){}

typeof 123

onload 一个页面或者一幅图像完成加载

onlick 鼠标单击某个对象

onmouseover 鼠标指移到某元素上

onkeydown 某个键盘按键被按下

onchange 域的内容被改变
取得select选中值
首先获取select对象，拿到选中项的索引：var index=select.selectedIndex;，
selectedIndex代表的是所选中项的index，
拿到选中项options的value：select.options[index].value;
拿到选中项options的text：select.options[index].text;
DOM:
DOM的三种类型:
DOM Core 只要支持DOM编程的语言都可以使用
HTML DOM 主要是用来操作HTML文档
CSS DOM 对CSS进行相关操作、

	可以取值的   就可以运用运算符
节点的相关操作：
	操作指定节点
		getElementById()，getElementsByName()，
		getElementsByTagName()
	操作层次关系的节点
		
		返回节点的父节点parentNode
		childNodes返回子节点集合
		firstChild返回节点的第一个子节点
		（firstElementChild过滤空格）
		lastChild返回节点的最后一个子节点
		（lastElementChild过滤空格）
		nextSibling下一个节点
		（nextElementSibling过滤空格）
		previousSibling上一个节点
		previousElementSibling过滤空格）

		标签里面的文本值也算是一种空格，
		如果使用Element来获取标签里面的文本会当成空格处理
	节点信息
		nodeName 节点名称
		nodeValue节点值
		nodeType节点类型
	操作节点属性
		getAttribute("属性名")用来获取属性值
		setAttribute("属性名","属性值")用来设置属性的值
	创建和插入节点
		all[i].setAttribute("this-name,all[i].nodeName)
		添加属性为“this-name”为节点name
		createElement(xxx)创建一个标签名为xxx的 元素节点   
		createTextNode   创建一个文本节点
		createComment()注释节点
		a.appendChild(b)把b节点追加到a节点的末尾
		insertBefore(a,b)把a节点插入b节点之前
		cloneNode(deep)复制某个指定节点
	删除和替换节点
		removeChild(node)删除指定的子节点
		remove() 直接删除
		replaceChild(newNode,oldNode)
		用其他的节点替换指定节点
	操作节点样式
		Style属性：html元素.style.样式属性="值"
		className属性：html元素.className = "样式名称"
		获取元素的样式：html元素.style.样式属性		
	获取元素的位置:
	
	setTimeout("调用函数名称",等待毫秒)   只执行一次
	setInterval("调用函数名称",等待毫秒) 执行多次
	clearTimeout(setTimeout()返回的ID值)
	clearInterval(setTimeout()返回的ID值)

	back()  加载到前面的；
	forward() 加载到后面；
	go()

	reload() 刷新
	replace() 替换
	host 返回主机或者 URL
	hostname
	href  返回完整的
	
	referrer  返回载入当前文档的URL  ，如果不是通过超链接访问的则
		返回null。
	URL     返回当前文档的URL

src放外部文件地址

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

在 JavaScript 中有 5 种不同的数据类型：

string
number
boolean
object
function
3 种对象类型：

Object
Date
Array
2 个不包含任何值的数据类型：

null
undefined

事件:
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

字符串:
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

节点分为:
元素节点 —1
属性节点 —2
文本节点 —3
注释节点 —8
document —9
DocumentFragment —11 创建文档片段对象

查看元素节点:
doucument //代表整个文档
doucument.getElementById() //获取id属性的元素 (唯一)
.getElementsByTagName() //获取所有标签名(常用,所有浏览器都兼容) (一组)
.getElementsByName(); //获取name属性值的元素 (一组)
.getElementsByClassName() //获取类名(一组)(获取唯一类名需要加[0])

遍历节点树: (识别注释节点文本节点)
parentNode 返回元素父节点 (最顶端为 document)
childNodes 返回元素子节点们 (返回所有子节点)
firstChild 返回第一个子节点（firstElementChild过滤空格）
lastChild 返回最后一个子节点（lastElementChild过滤空格）
nextSibling 返回下一个兄弟节点（nextElementSibling过滤空格）
previousSibling 返回前一个兄弟节点 previousElementSibling过滤空格）
标签里面的文本值也算是一种空格，+6+
如果使用Element来获取标签里面的文本会当成空格处理

基于元素节点树的遍历: (过滤其他节点,直接选取下一个元素)
parentElement 返回当前元素的父元素节点 (ie不兼容)
children 值返回当前元素的元素子节点 (常用)
node.childElementCount===node.children.length当前元素节点的子元素节点个数
firstElementChild //返回当前元素的第一个子节点
lastElementChild //返回当前元素的最后一个子节点
nextElementSibling //返回当前元素的下一个一个兄弟节点
previousElementSibling //返回当前元素的上一个兄弟节点
previousElementSibling (过滤空格）

获取节点类型 nodeType
每个节点(!!!基本上)都有自己的四个属性!
nodeName 元素的标签名,一大些形式表示 (只读)
nodeValue Text节点Comment节点的文本内容,可读写
nodeType 该节点的类型,只读
attributes Element 节点的属性集合
节点的一个方法 Node.hasChildNodes() 判断节点还有不有子节点返回true或false