JS dom最常用API

//document方法:
    var cont = document.getElementByIdx_x(‘cont‘);

//className给标签添加class
    cont.className = ‘fcolor‘;

//setAttribute方法可以添加一些属性,但是不是css样式哦!
    var a_id = document.getElementByIdx_x(‘a_id‘);
    a_id.setAttribute(‘href‘,‘http://www.oeeee.com‘);

//getAttribute所产生的内容
    var a_att = a_id.getAttribute(‘href‘);
    document.write(‘getAttribute所产生的内容:‘ + a_att + ‘<br>‘ + ‘<br>‘);

//removeAttribute所产生的内容
    var a_att = a_id.removeAttribute(‘href‘);
    document.write(‘removeAttribute后所产生的内容:‘ + a_att + ‘<br>‘ + ‘<br>‘);

//innerHTML获得html内容
    document.write(‘innerHTML所产生的内容:‘ + cont.innerHTML + ‘<br>‘);

//getElementsByTagName_r()方法返回带有指定标签名的对象的集合,不常用
    var div = document.getElementsByTagName_r(‘div‘);
    document.write(‘getElementByTagName()所产生的内容:‘ + div.length + ‘<br>‘);

//document.body返回body元素标记
    var dom_body = document.body;
    dom_body.setAttribute(‘bgcolor‘,‘#186376‘);

var txt = dom_body.createTextNode(‘dfsdfsdjffdsf‘);
    var p = dom_body.createElement_x(‘p‘);
    p.appendChild(txt);
    dom_body.appendChild(p);

----------------------------------------------------------------------------

    1. document方法:
    2. getElementById(id) Node 返回指定结点的引用
    3. getElementsByTagName_r(name) NodeList 返回文档中所有匹配的元素的集合
    4. createElement_x(name) Node Node
    5. createTextNode(text) Node 创建一个纯文本结点
    6. ownerDocument Document 指向这个节点所属的文档
    7. documentElement Node 返回html节点
    8. document.body Node 返回body节点
    9. element方法:
    10. getAttribute(attributeName) String 返回指定属性的值
    11. setAttribute(attributeName,value) String 给属性赋值
    12. removeAttribute(attributeName) String 移除指定属性和它的值
    13. getElementsByTagName_r(name) NodeList 返回结点内所有匹配的元素的集合
    14. node方法:
    15. appendChild(child) Node 给指定结点添加一个新的子结点
    16. removeChild(child) Node 移除指定结点的子结点
    17. replaceChild(newChild,oldChild) Node 替换指定结点的子结点
    18. insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点
    19. hasChildNodes() Boolean 如果结点有子结点则返回true
    20. node属性:
    21. nodeName String 以字符串的格式存放结点的名称
    22. nodeType String 以整型数据格式存放结点的类型
    23. nodeValue String 以可用的格式存放结点的值
    24. parentNode Node 指向结点的父结点的引用
    25. childNodes NodeList 指向子结点的引用的集合
    26. firstChild Node 指向子结点结合中的第一个子结点的引用
    27. lastChild Node 指向子结点结合中的最后一个子结点的引用
    28. previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
    29. nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
时间: 2024-12-18 17:41:20

JS dom最常用API的相关文章

jquery 常用api

*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. C)参见<<>> (2)jquery操作DOM的常用API实战 父.append(子) 父.prepend(子) ------------------------------ A.after(B):B在A之后 A.before(B):B在A之前 --------------------

【repost】Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有

javascript DOM常用API总结

作者:狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5008913.html 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是

Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 原文地址:http://luopq.com/2015/11/30/javascript-dom/ 类型 Node类型(ELEMENT_NODE:1 ATTRIBUTE_NODE:2 TEXT_NODE:3 COMMENT_NODE:8``DOCUMENT_NODE:9 DOCUMENT_FRAGMENT_NODE:11) 节点创建型(createElement createTextNode cloneNode createDocumentFragme

echart.js的使用与API

---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echart的官方首页下载最新最全面的js文件,官网:http://echart.baidu.com): <script src="./js/echarts.js"></script> 第二步:并在body中创建一个具备大小的dom(div): <div id=&quo

js DOM学习笔记4

DOM 编程就是使用 W3C 定义的 API (Application Program Interface)来操作 HTML 文档 (此处不局限于 HTML,亦可操作 XHTML.XML 等),使用户可以与进行页面交互. 你需要了解节点.属性.样式等基本 DOM 操作,DOM 事件模型,数据存储 (Cookie.Storage) 与数据通信 (Ajax) ,JavaScript 动画,音频.视频.Canvas 等 HTML5 特性,表单.列表操作. DOM(Document Object Mod

JS中的常用的代码操作

本文件介绍常用的js代码的DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Console对象)操作说明. 一.DOM树的节点 DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图: //通过ID来查看元素属性 var li =

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/