JavaScript（十一）Dom

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/96weibin/p/8527763.html

文章标签：

#javascript #ViewUI

本文详细介绍了DOM（文档对象模型）的基础知识，包括获取DOM对象的方法、判断DOM节点类型、节点属性和方法、遍历节点树等内容，并讲解了如何进行DOM的基本操作如创建、插入、删除节点等。

Dom(Document object module)

1.获取dom对象的方法

正常用的方法 推荐　　
getElementById()//通过id选择唯一的dom
getElementsByClassName()//通过class选出一组
getElementsByTagName()//通过标签名选出一组
getElementsByName()//通过name属性选出一组

括号里可以直接写 css的选择器
IE7以下版本没有　　而且和上面的几种相比会慢很多 
而且这种获取后就是静态的了  所以很少用
querySelector()　　//多个同样的元素只选出第一个
querySelectorAll()//选出满足条件的一组

2.通过NodeType判断Dom节点类型(dom.attraibute[0].nodetype)

元素节点——1

属性节点——2

文本节点——3

注释节点——8

document——9

DocumentFragment——11

3.节点的属性

nodeName——元素的标签名只读

nodeValue——文本、注释节点有且可读写

nodeType——区分不同节点

attribute——存了这个元素所有属性节点的集合

4.节点的方法

Node.hasChildNodes()　　返回true false 文本节点也算

5.遍历节点树

parentNode 　　父节点 (html标签外面还有最外面的是 #document)

childsNodes　　子节点们　　chaildNodes.length　　（包括全部节点类型）

firstChild　　　第一个子节点

lastChild　　　　最后一个子节点

nextSibling　　　下一个兄弟节点

previousSibling　前一个兄弟节点

6.基于元素节点树的遍历(很久之前做的笔记下面这些IE不兼容如今试了一下都可以的)

parentElement　　返回当前元素的父元素节点

children　　　　　返回当前元素的元素子节点

childElementCount 返回子元素节点的个数

firstElementChild　　返回第一个元素节点

lastElementchild　　返回最后一个元素节点

nestElementSibling\previousElementSibling　　返回后一个\前一个元素节点

7.Dom结构树

8.Dom的基本操作

　　添加节点

　　createElement();

　　createTextNode()

　　createComment()

var box = document.createElement('div')

　　创建事件

document.createEvent('dong');

　 设置节点的样式

box.style.width=100+'px';
box.style.height=100+'px';
box.style.background = 'blue';

　　　把添加的节点插入元素

　　insertBefore()　　父级.insertBefor(新,某个子元素);

　　removeChild()　　删除子元素节点

　　replaceChild()　　替换子元素节点

document.body.appendchild(box);

　　获取元素节点的样式

　　getComputedStyle()　　//获取计算样式

　　style.attr　　　　　　　//行间样式可读写

var oBox = document.getElementById('only');
var oWidth = getComputedStyle(oBox).width;

　　元素节点的属性

　　 getAttribute() 获取元素节点的某个属性

　　 setAttribute()设置元素节点的某个属性

　　 hasAttribute()判断是否有某个属性

oBox.setAttribute('class','box');
console.log(oBox.getAttribute('class'));

　　设置 class 还可以使用 dom.className = ''　　多个class 就用字符串拼接

转载于:https://www.cnblogs.com/96weibin/p/8527763.html