js总结——17天

最新推荐文章于 2024-04-13 15:24:47 发布

chouku4502

最新推荐文章于 2024-04-13 15:24:47 发布

阅读量94

点赞数

原文链接：https://my.oschina.net/u/3504091/blog/983158

版权

####元素的内容

innerHTML
outerHTML ####作为纯文本的元素内容
textContent IE9+
innerText --忽略多余的空白 ####文本节点的方法
appendData() 向文本节点追加内容
deleteData(start,length) 删除文本部分内容
insertData(start,string) 向文本中插入部分内容
replaceData() 替换文本内容
substringData() 截取文本内容

####元素节点操作

节点的创建 #####document.createElement();
节点的添加 appendChild() --在元素后面添加 insertBefore(new,old) --在元素指定的位置添加
删除节点 removeChild() --使用父级删除子级
替换节点 replaceChild(new_node,old_node)
克隆节点 cloneNode() true --克隆当前节点以及其所有的后代节点 false --只克隆当前节点 #####DocumentFragment节点文档碎片(临时容器) 文档片段 document.createDocumentFragment(); documentFragment节点不属于文档树 #####应用实例：元素反转 var frag = document.createDocumentFragment(); while(container.lastChild){ frag.appendChild(container.lastChild); } container.appendChild(frag); ----完成反转后frag将不存在文档中 ####元素宽高位置滚动等尺寸 #####1. 元素坐标
offsetLeft 距离已定位的父级left值
offsetTop 距离已定位的父级top值
offsetParent 得到最近定位的父级元素
clientLeft 得到边框的尺寸
clientTop 得到边框的尺寸 #####2. 元素尺寸
getBoundingClientRect() 尺寸对象
offsetWith 盒子模型的宽（包含边框）
offsetHeight 盒子模型的高(包含边框)
clientWidth 盒子模型的内容宽(不包含边框)
clientHeight 盒子模型的内容高(不包含边框)
scrollWidth 盒子模型的宽(计算超出内容)
scrollHeight 盒子模型的高(计算超出内容) #####3.滚动
scrollLeft
scrollTop #####4. 通过坐标点获取元素
document.elementFromPoint(100,100); #####5. 获取html文档的宽高
document.documentELement.offsetWidth; --视口宽度
document.documentElement.clientHeight; --视口高度
document.documentElement.scrollHeight; --内容高 #####DOCUMENT对象每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
URL 获取当前页面的URL --只读
domain 获取域名 --只读
referrer 获取上一个页面的地址 --只读
title 页面title
location 主机 --只读
lastModified 最后一次修改时间
cookie 获取或设置cookie ######方法：
document.write();
document.getElementById();
.......

####Table表格 #####table属性

cells 返回包含所有单元格的数组
rows 返回包含所有行的数组<br> -tab.rows[0].cells[1]
border 返回或设置table边框
caption 对表头的引用
cellPadding 设置或返回内容与单元格边框间距
cellSpacing 设置或返回单元格间距
id 设置或返回表格的id
width 设置或返回表格的width #####table 方法
createCaption 创建一个表头<br> --var s = tab.createCaption();s.innerHTML=‘’;
deleteCaption 删除表头<br> --tab.deleteCaption();
createTHead() 在表格中创建一个空的 tHead 元素。
deleteTHead() 从表格删除 tHead 元素及其内容。
createTFoot() 在表格中创建一个空的 tFoot 元素。
deleteTFoot() 从表格删除 tFoot 元素及其内容。
insertRow() 在表格中插入一个新行。
deleteRow() 从表格删除一行。--传入行的索引 ####tr 的属性
cells 返回包含行中所有单元格的一个数组。
rowIndex 返回该行在表中的位置。 ####tr 的方法
deleteCell() 删除行中的指定的单元格。
insertCell() 在一行中的指定位置插入一个空的 <td> 元素。 ####td、th的属性
cellIndex 返回单元格在某行的单元格集合中的位置。