• 注册
当前位置:1313e > 默认分类 >正文

DOM 方法 以及 DOM的增删减改

DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

一. DOM 方法

这里讲解一些DOM的基本方法,叫你如何获取HTML标签:

在document中有一个属性body,他保存的是body的引用

var body = document.body;

document.documentElement保存的是html根标签

var html = document.documentElement;

//document.all 表示页面中所有元素 all可以用*表示

var all = document.all;
var all1 = document.getElementsByTagName(’*’);

根据元素的class属性值查询一组元素节点对象

document.getElementsByClassName 可以根据class属性获取一组元素节点对象

var box1 = document.getElementsByClassName(‘box1’);

获取页面中所有div

var div = document.getElementsByTagName(‘div’);

获取class为box1中所有的div
.box div
document.querySelector()

需要一个选择器的字符串作为参数,可以根据一个css选择器查询一个元素节点对象

使用该方法只会放回一个元素,即便是满足条件的元素有多个也只会返回第一个

var div1 = document.querySelector(".box1 div");

document.querySelectorAll()
该方法和document.querySelector()相似,不同的是该方法会返回一个数组
即使符合条件的只有一个元素也会包装到一个数组中返回

var div = document.querySelectorAll(".box1 div");

二.DOM的增删减改

创建一个节点

myClick(‘id’,function(){});

创建一个元素节点对象,需要标签名作为参数,将会根据标签名创建元素节点对象并将创建好的节点作为返回值返回

ocument.createElement();

创建一个文本节点对象需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回

document.createTexeNode()

insterBefore()

- 可以在指定的子节点前插入新的子节点
- 语法  :父节点.insertBefore(新节点,旧节点);
- parentNode 获取子节点的父节点

replaceChild替换节点

-使用指定的子节点替换旧节点

removeChild 删除子节点

-父节点.removeChild(子节点);

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录
相关推荐