javascript DOM有用函数

原创 2015年07月06日 22:43:28

javascript是一种脚本语言,DOM是文档对象模型,它是加载在浏览器窗口当前网页的一个文档映射,用来解析文档!作用是提供这样一个标准模型,其实就是一个API接口,然后就可以通过脚本语言对文档进行访问(修改,删除、添加元素)。DOM模型是一种树模型,也可以成为节点模型,包括元素节点,文本节点,属性节点!这个接口提供了很多属性及方法使脚本语言(不仅限于javascript)来操作文档。
获取元素节点:document.getElementById()、 document.getElementsByTagName()、 document.getElementsByClassName()、document.getAttribute()、 document.setAttribute()。(注:均未给参数)
DOM几个属性:childNodes、parentNode、nextSlibing、 previousSbling、firstChild、lastChild、nodeType、nodeName、nodeValue.
DOM动态创建标记:createElement()、createTextNode()、appendChild()、insertBefore()。(注:均未给参数)
操作DOM的过程中还会有很多常用的操作,但DOM并没有给出相应的函数直接操作:现给出几个以后经常会用到,并且可以直接加载到js文件中应用的函数:
1.DOM没有提供一个向元素节点这后插入一个元素节点的方法,运用已有的DOM操作自己编写一个实现该功能的函数:
function insertAfter(newElement,targeElement)}{
var parent=targeElement.parentNode;
if(parent.lastChild==targeElement){
parent.appendChild(newElement);
}else{
parent.insertBefor(newElement,targeElement.nextSibling);
}
}
2.onload事件在HTML文档加载完时只能执行一个函数,如下函数可以实现执行任意多个的函数,只需调用该函数就可:
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!=”function”){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
3.该函数可以实现向一个元素追加任意个class属性,实现样式的控制:
function addClass(element,value){
if(!element.className){
element.className=value;
}else{
newClassName=element.className;
newClassName+=”“;
newClassName+=value;
element.className=newClassName;
}
}
路漫漫其修远兮,吾将上下而求索!

版权声明:本文为博主原创文章,未经博主允许不得转载。

DOM对象和内置对象(上)

前言 在第一篇博客《了解JavaScript》中已经介绍了DOM及DOM树里顶端对象window,还有它的一个子对象 document。接下来会接受它们的一些实用的对象和方法,如: 1、a...
  • GULINHAI12
  • GULINHAI12
  • 2015年09月04日 19:34
  • 2697

javaScript的函数,事件,BOM,DOM

js中的函数,事件,BOM和DOM对象 function fun1(a,b){ alert(a+b); } fun1(2,5);...
  • strong_yu
  • strong_yu
  • 2016年07月12日 17:23
  • 1641

学习JQuery中的DOM操作和事件操作

学习JQuery中的DOM操作和事件操作一些问题JQuery是一个javascript类库,那类库是什么,库和框架的区别有是什么呢? 库的英语为Library,是将代码集合成的一个产品,供程序员调用。...
  • weixin_35955795
  • weixin_35955795
  • 2017年01月07日 12:41
  • 202

JavaScript之DOM对象和内置对象

1. window 和document 对象 浏览器每次加载和显示页面时,都在内存里创建页面及其全部元素的一个内部表示体系,也就是DOM。在DOM 里,页面的元素具有一个逻辑化、层级化的结构,就像一个...
  • cighao
  • cighao
  • 2015年10月22日 21:47
  • 890

DOM对象触发事件的一些解

Web浏览器中的JavaScript实现允许我们定义响应用户事件(通常是鼠标或者键盘事件)所执行的代码。在支持Ajax的现代浏览器中,这些事件处理函数可以被设置到大多数可视元素之上。我们可以使用事件处...
  • u010837486
  • u010837486
  • 2015年02月04日 13:34
  • 1426

javascript 获取HTML DOM对象五种方式

获取DOM对象有5种方式: 1.document.getElementById('id');//返回结果是一个对象,如果存在两个标签拥有相同id,则返回第一个标签对象。 2.document.ge...
  • woniuguanjun
  • woniuguanjun
  • 2014年06月05日 23:40
  • 1821

JavaScript绑定事件的方法[3种]

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。 在JavaScript中,有三种...
  • Johnny0991
  • Johnny0991
  • 2016年06月28日 20:00
  • 6102

js与jQuery的DOM操作比较(一)

js与jQuery的DOM操作比较(一) 最近才开始学jQuery,它的代码简单,操作起来方便,jQuery库的功能特别强大。jQuery作为一种JavaScript库,继承并优化了JavaScri...
  • h_cjj
  • h_cjj
  • 2016年04月16日 15:56
  • 825

js css html和DOM的关系和使用场景

html:作为网页的布局上的框架基础,用来编写网页的结构,即网页的组成元素和各元素之间层级关系。同时html中只有一系列已给定的类型作为基础构件,只能通过各元素的并置或叠套来组合各个元素。没有函数也不...
  • u014507230
  • u014507230
  • 2015年04月27日 15:07
  • 944

整理的前端面试题2

1.  css的display:none和visibility:hidden区别 display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;               元素原来占据...
  • qq1024884152
  • qq1024884152
  • 2017年04月24日 19:06
  • 263
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript DOM有用函数
举报原因:
原因补充:

(最多只允许输入30个字)