开篇寄语:
要紧盯住自己的人生目标,不要被周围毫无意义的人或者事所牵绊,尤其不要生闲气。
看淡一点,不要太在乎别人的那张脸;简单一点,不要用他人的尺子,量自己的长短。心态好,一切安好。
昨天给大家提到过,那现在就一起来看看DOM。
二、JavaScript操作DOM对象
1、什么是DOM
DOM:Document Object Model 文档对象模型
要实现页面的动态交互效果,BOM操作远远不够,需要操作 html 才是核心。如何操作 html,就是 DOM。
简单的说,DOM提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM处于javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
2、节点
加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成,组成一个节点树。对于页面中的元素,可以解析成以下几种类型的节点:
节点类型 HTML内容 例如
文档节点 文档本身 整个文档 document
元素节点 所有的HTML元素 、
属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释
百度
百度3、元素节点的操作
当HTML文档在被解析为一颗DOM树以后,里面的每一个节点都可以看做是一个一个的对象,我们成为DOM对象,对于这些对象,我们可以进行各式各样的操作,查找到某一个或者一类节点对象,可以创建某种节点对象,可以在某个位置添加节点对象,甚至可以动态地删除节点对象,这些操作可以使我们的页面看起来有动态的效果,后期结合事件使用,就能让我们的页面在特定时机、特定的事件下执行特定的变换。
获取节点
在进行增、删、改的操作时,都需要指定到一个位置,或者找到一个目标,此时我们就可以通过Document对象提供的方法,查找、定位某个对象(也就是我们说的节点)。
注意:操作 dom 必须等节点初始化完毕后,才能执行。处理方式两种:
a. 把 script 调用标签移到html末尾即可;
b. 使用onload事件来处理JS,等待html 加载完毕再加载 onload 事件里的 JS。
window.onload = function() {
// 当页面加载完后调用函数
};
这是一个段落文本
这又是一个段落
游泳
篮球
足球
根据id获取元素
根据name获取元素
根标签名称获取元素
根据class获取元素
创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点,此时我们首先需要有一个节点存在,可以通过以下几种方式创建新节点。
创建节点
插入节点
添加段落
添加选项框
方法|属性 描述
removeChild() 从元素中移除子节点
第一种:获取父节点,然后删除子节点
父节点.removeChild(childNode);
第二种:通过旧节点定位到父节点,然后删除子节点
childNode.parentNode.removeChild(childNode);
4、属性操作
在操作DOM对象时,除了可以操作对象整体之外,还可以更加灵活地操作对象中的各个属性。
性别:
男
女
![sxt](img/timg.jpg)