DOM基础知识

来源：互联网发布：武汉php培训编辑：程序博客网时间：2024/06/05 10:41

DOM初步

1、What can I do for you?

DOM可以做什么？1、  可以向页面上添加元素（属性、文本）  --  增2、  可以动态的把页面上的元素删除      --  删3、  可以修改页面上的元素(属性、文本）   --  改4、  可以查找到页面上的元素             --  查操控页面元素、进行增删改查。

2、一些细节

（1）、在<head>标签中要使得<script>生效，应当加入事件：    window.onload=function(){        写script操作；    }（2）、href="javascript:void"，此时点击该标签不会跳转；（3）、disabled="disabled"，禁用该标签；    a.checked=!a.checked；   禁用取反；

3、DOM操作

增

document.createElement()        创建元素；document.createAttribute()      创建属性；appendChild     加入子元素；innerHTML       内部元素；

删

removeChild 删除所有子元素；innerHTML   清空则使得innerHTML=""；

查

document.getElementById()           没有兼容性问题；document.getElementsByTagName()     没有兼容性问题；document.getElementsByClassName()   ie9以下不支持；document.querySelector()            贼好用；document.querySelectorAll()         贼好用；

改

1、一些小细节

    element.className="name";    element.style.background="yellow";        tips：        （1）、    属性的书写（两种）            a) 如果属性只要一个单词，这个单词可以直接写出来并且是小写的                比如：color、border            b）如果属性有多个单词，要把写在css里的横杠去掉，然后根据驼峰命名的方式来写对应的属性                比如：                    在css当中，backgrond-color，在js的style当中变成：backgroundColor        （2）、    如果要重置，就让某个属性赋值为空字符串；        （3）、    实际作用在标签的style属性里（行内式），也只能获取到行内样式（注意）；    inputs.type="button";    element.disabled=true;    element.disabled=false;    element.selected=true;        tips：诸如disabled和selected的值都用true和false来控制禁用启用；    element.innerHTML="";    element.innerText="";   低版本的火狐不支持，低版本支持textContent；

2、注册事件

    element.onclick=function(){};            ondblclick  鼠标双击            onkeydown   按下键盘上的一个按键时触发             onkeyup     松开键盘上的一个按键时触发            onchange    文本内容或下拉菜单中的选项发生改变            onfocus     获得焦点，表示文本框等获得鼠标光标            onblur      失去焦点，表示文本框等失去鼠标光标            onmouseover     鼠标悬停            onmouseout      鼠标移出            onload          文档加载完成            onunload        关闭网页时触发            onsubmit        表单提交事件    addEventListener的方式             事件源.addEventListener(事件名称，事件处理程序，false)            早期的火狐和ie6,7,8不支持    attachEvent的用法            事件源.attachEvent(on+事件名称,事件的处理程序)            早期的火狐和ie6,7,8支持    兼容写法：        function addEventListener(element,eventName,fn) {            if(element.addEventListener){                element.addEventListener(eventName,fn,false);            }else {                element.attachEvent("on"+eventName,fn);            }        }

3、节点操作

（1）、创建

document.write；         创建，使用这个方法可以向页面上动态地添加元素;element.innerHTML；      创建，使用这个方法可以向任意元素中动态地添加元素;document.createElement(tagName);    创建，使用这个方法可以创建任意元素;

（2）、追加

parent.appendChild(node);   追加，使用这个方法可以向某个父元素的末尾追加一个新的子元素;

（3）、克隆

node.cloneNode(deep);   克隆，使用这个方法可以克隆某个元素到内存中，        只能得到一个节点对象，需要手动添加到页面中;        deep的值：true 深度克隆        克隆当前元素和所有的子元素；                 false  浅度克隆        只克隆当前元素(默认)；

（4）、删除

parent.removeChild(node)；   删除，这个方法可以删除某个指定的子元素；

（5）、插入

parent.insertBefore(newNode,oldNode)；   插入，向某个父元素中的指定位置插入一个新的子元素；

（6）、替换

parent.replaceChild(newNode,oldNode)；   替换，将某个父元素的任意一个子元素另外一个元素；    eg：            var node=document.createElement("tagName");            parent.appendChild(node);   (创建一个标签，追加到元素中)；

4、节点的概念

（1）、节点属性节点类型(nodeType)    元素节点：       1；    属性节点：       2；    文本节点：       3；节点名称(nodeName)    元素节点：       就是对应的标签名，div；    属性节点：       就是对应的属性名称，class；    文本节点：       #text；节点值(nodeValue)    元素节点：       null；    属性节点：       就是对应的属性值；    文本节点：       就是对应的文本；    eg：box.nodeType;（2）、节点    parentNode        一般父节点都是元素节点；        eg:parent.parentNode；    childNodes  获取子节点中的元素节点和文本节点；    children    仅仅获取子节点种的元素节点；    ---------------------------    node.nextSibling    下一个兄弟节点；        可以是元素、属性、文本节点；        在ie8及更低版本，是只能获取到元素节点和非空文本节点，但是不影响；    node.nextElementSibling             下一个兄弟元素节点，只会得到一个元素节点；        兼容：ie8不支持；    ---------------------------    node.previousSibling    上一个兄弟节点，        可以是元素、属性、文本节点；        在ie8及更低版本，是只能获取到元素节点和非空文本节点，但是不影响；    node.previousElementSibling     上一个兄弟元素节点；        只会得到一个元素节点；        兼容：ie8不支持；    ---------------------------    firstChild      得到的是第一个子节点；        可以使元素、文本、属性；在ie8下回忽略空的文本节点；    lastChild       得到的是最后一个子节点；        可以使元素、文本、属性；在ie8下回忽略空的文本节点；    ---------------------------    firstElementChild   得到的是第一个元素子节点        ie8下不支持    lastElementChild    得到的是最后一个子节点        ie8下不支持    ---------------------------（3）、方法childElementCount   获取的是节点之下所有子元素的个数；                ie8不支持；    tips：建议使用parent.children.length;

4、定时器

setTimeout(code,delay)，该计时器只会执行一次，只作延迟动作；    clearTimeout（id）：清除计时器执行动作；    eg:        var id = setInterval(function () {            console.log("新几次哇一次魔hi托次！");        },1000);        document.getElementById("btn").onclick = function(){            clearInterval(id);        }    tips：计时器的返回值是一个句柄，是一个数字id，直接获取即可，        通过返回值可以使用clearTimeout方法，将计时器终止；setInterval(code,delay)，该计时器每隔一段时间会执行一次code，不断循环；    clearInterval(id):其清除本循环计时器；    tips：使用方法与setTimeout同理。

BOM

Browser Object Model，浏览器对象模型；

window对象

（1）、open    在浏览器打开一个新窗口；    window.open(url,name,specs,replace);    tips：name指是否打开新窗口（_self或_blank），specs是页面选项，replace表示是否需要覆盖历史记录；（2）、close   关闭其他窗口或自己窗口；    window.close()；（3）、window.onload=function(){}      页面加载完毕事件；window.onunload=function(){}    关闭页面触发该事件；    tips：window对象的组成，DOM、Location、History、Navigator、Screen；        window是页面中所有内容的父元素；        window即指代浏览器窗口，全局函数都由window调用；

Location对象

Location对象包含了浏览器的url信息；（1）Location属性    hash        获取url的锚部分，就是#后面的数据；    host        获取url的主机和端口；    hostname    获取url的主机名；    href        获取完整的url；    pathname    获取url的路径；    port        获取端口；    protocol    获取url的协议；    search      获取url的参数部分，就是？后面的数据；（2）reload方法    window.location.reload(forceget);    相当于刷新页面。        forceget：                true - 表示强制重新去服务器请求数据；                false - 表示从本地或缓存中获取数据；（3）、href方法    location.href = "链接"；        该方法可以将当前页面跳转到指定链接；

History对象

history.back        回到上一个浏览的页面(如果存在)；    用法：history.back();history.forward     前进到下一个浏览器的页面(如果存在)；    用法：history.forward();history.go()            可以到达指定的访问过的页面；    用法：history.go(-1);  为-1则跳转到上一个页面；        history.go(1);      为1则跳转到下一个页面；

Navigator对象

Navigator对象包含当前窗口的浏览器信息；appCodeName     返回浏览器代码名称，返回Mozilla；appName         返回浏览器名称，返回Netscape；appVersion      返回浏览器的平台和版本信息；platform        返回运行浏览器的操作系统信息；userAgent       返回浏览器发送到服务器的user-agent 头部的值 ；

0 0