javascript里面dom操作和兼容问题汇总

DOM     增,删,改,查

oUl.children         获取UL的子节点         有length的属性

oUl.children[0]    获取UL第1个子节点     使用比较多

oUl.children[oUl.children.length-1]    获取Ul的最后一个子节点    使用比较多

oUl.parentNode    获取Ul的父节点    body,HTML,document

oUl.firstElementChild||oUl.firstChild    首个节点(first)    "firstChild 低版本IE6 -8

firstElementChild 高级浏览器"

oUl.lastElementChild||oUl.lastChild    最后一个字节点    同上

oLi.previousElementSibling||oLi.previousSibling    获取上一个兄弟节点    相对自己

oLi.nextElementSibling||oLi.nextSibling    获取下一个兄弟节点    相对自己

var oLi=document.createElement(‘li‘);    创建一个li的节点    创建赋值添加3个步骤

oLi.innerHTML=‘‘    给它赋值

oUl.appendChild(oLi);    插入到oUl里面去(向后插入)常用

oUl.insertBefore(要插的元素,插到哪里)    插入到某个元素前面去

oUl.removeChild(要移除的元素);    删除掉某个元素

节点.cloneNode()    克隆某个元素    "cloneNode(true)深度克隆

移除id:节点.removeAttribute(‘id‘);"

window.onscroll    滚动事件    当鼠标滚动的时候发生

window.onresize    窗口事件    当窗口缩小/放大的时候

滚动距离    配合滚动事件

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

document.documentElement.clientHeight    可视区的高度

document.documentElement.clientWidth    可视区的宽度

offsetHeight(占位物体)(live事件)    物体盒模型高度    border+padding+height

offsetWidth(占位物体)(live事件)    物体盒模型宽度    border+padding+width

offsetparent    定位父级    如果没有定位父级则是body

parentNode     结构父级

offsetTop(占位物体)    物体盒模型最外边距离定位父级的top值    如果没有定位父级则是相对body

offsetLeft(占位物体)    物体盒模型最外边距离定位父级的left值    如果没有定位父级则是相对body

getAttribute(‘属性‘)    获取行间自定义属性

setAttribute(‘属性‘,‘属性值‘);    设置行间属性值    对应使用

removeAttribute(‘属性‘)    移除属性

时间: 2024-11-05 20:28:00

javascript里面dom操作和兼容问题汇总的相关文章

第一百一十六节,JavaScript,DOM操作样式

JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表现文档

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

JavaScript的DOM操作(2)

补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大小并打印: var height=window.innerHeight;var width = window.innerWidth; document.write("<br/>"+"height"+height+",width"+widt

课堂笔记--------JavaScript 的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

HTML JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

HTML-教案-JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

JavaScript的DOM操作(节点操作)

创建节点createElement()var node = document.createElement("div");没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里. 2.创建文本节点createTextNode()var value = document.createTextNode("text");创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里.很多人知道innerHTML,不知道这个方法,这个