web第十一天

最新推荐文章于 2024-08-09 10:42:44 发布

Tyn999

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量108

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Tyn999/article/details/122999803

版权

DOM对象
   body 提供<body>元素的直接访问
   cookie 设置或返回与当前文档有关的所有cookie
   lastModified 返回文档被最后修改的日期和时间
   title 返回当前文档的标题
   URL 返回当前文档的URL
   getElementById() 返回对拥有指定id的第一个对象的引用
   getElementByName() 返回带有指定名称的对象集合
   getElementByTagName() 返回带有指定标签名的对象集合
   getElementByClassName() 返回带有指定class名称的对象集合
   write() 向文档写HTML表达式或JavaScript代码
   writeln() 等同于write()方法，不同的是在每个表达式之后写一个换行字符
   标签.属性设置或返回标签下的属性
   标签.style.fontSize="20px" 设置或返回样式
   标签.innerHTML="" 设置或返回文本或标签

表单
   表单名.文本框name 获得表单标签
   表单名.文本框name.value 修改值用value
   表单名.submit() 执行提交事件
事件
   onclick鼠标单击     onchange选择事件
   onmouseover()鼠标移近 onmouseout()鼠标移出
   onblur()失去焦点   onfocus()获得焦点
   onload()加载
事件操作方式
   方式1
       var btn=document.getElementById("btn")
       btn.οnclick=function(){
           //执行要操作的语句
       }
   方式2
       <button οnclick="fun()">点击</button>
       function fun(){ alert("按钮被点击") }
node类型
   nodeType获得节点类型
   1标签类型 2属性 3文本 8注释 9对象
   nodeName 节点名称 #text文本节点
   tagName 元素名称（不包括文本）
   appendChild() 尾部添加孩子
   removeChild() 删除孩子元素
   cloneNode(true/false)复制元素
   replaceChild(新，旧)替换元素
   insertBefore(新，旧)插入孩子元素（不会覆盖）
   document.createElement()创建标签
   document.createTextNode()创建文本
   getAttribute()获得属性
   removeAttribute()删除属性
   setAttribute()修改属性

图片
   var img=new Image()
   img.src=""
   document.body.appendChild=img
表格
   cells[]返回表格中所有单元格集合
   row返回表格中所有行的集合
   insertRow()在表格中添加一行
   deleteRow()在表格中删除一行
   rowlndex()返回行在表格中的位置
   insertCell()添加一个单元格
   deleteCell()删除一个单元格
   colSpan()跨列
   rowSpan()跨行

DOM扩展
   标签筛选
       1.firstchild 获得第一个孩子（包含文本节点）
       firstElementchild 获得第一个孩子
       2.lastchild 获得最后一个孩子（包含文本节点）
       lastchild 获得最后一个孩子
       3.childNodes 获得所有孩子节点集合（包含文本节点）
       children 获得所有孩子节点集合
       4.previousSibing 获得上一个兄弟（包含文本节点）
       previousElementSibing 获得上一个兄弟
       5.nextSilbing 获得下一个兄弟（包含文本节点）
       nextElementSibing 获得下一个兄弟
       6.parentNode()获得父类节点

       获得元素
       querySelector() 通过选择器获得一个标签
       querySelectorAll() 通过选择器获得标签集合
       matchesselector() 判断一个选择器是否属于某个标签
       兼容不好可以写前缀，例如：webkitMatchesselector()
       li[0].webkitMatchesSelector(".li")

class操作
   classList对象
       add()添加class属性
       remove()删除class属性
       contains()判断class是否存在
       toggle()添加删除切换class

自定义属性
   html5语法可以为标签自定义属性内容，但是属性定义必须以“data-”开头，可以通过js调用自定义的属性值
   例如：
       <p data-aa="23"＞</p >

插入文本和标签
   innerHTML()内添加标签或文本
   outerHTML(外添加标签或文本
   innerText()内添加文本
   outerText()外添加文本
   innsetAdiaceHTML(位置，元素)插入指定元素
       beforebegin在前面添加兄弟
       afterbegin在前面添加孩子
       beforeend 后面添加孩子
       afterend 后面添加兄弟

文档模式
   <meta http-equiv="X-UA-Compatible" content="lE=edge">
   edge 用最新文档模式渲染
   EmulatelE9如果有文档类型声明，则用ie9，否则用ie5
   EmulatelE8如果有文档类型声明，则用ie8，否则用ie5
   EmulatelE7如果有文档类型声明，则用ie7，否则用ie5
   9：强制用IE9渲染 8：强制用IE8渲染
   7：强制用IE7渲染 5：强制用IE5渲染