JavaScript DOM的介绍以及使用方法

DOM的介绍以及使用方法

DOM 全称document object model 文档对象模型 操作HTML

HTML文档有HTML+css组成 DOM 利用js操作HTML+css的

操作元素节点 element Element 元素节点对象

查 获取元素节点的方式

通过选择器获取

div就是元素的节点(任意的标签都是元素节点)

id就是属性节点（任意的属性都是属性节点）

你好就是文本节点（任意的文本都是文本节点）

<div id="box" class="content" name="divName">你好</div>
var divName = document.getElementsByName('divName')
​
console.log(divName);
​
console.log(divName[0]);

复合选择器

里面的参数为string类型的选择器，返回第一个匹配选择器的元素，返回的是一个element

var selectDiv = document.querySelector('div')
​
console.log(selectDiv);
​
返回所有匹配选择器内容 接收的是一个nodeList
​
var selectAll = document.querySelectorAll('.content')
​
console.log(selectAll);
​
console.log(selectAll[0]);

操作属性节点

attribute Attr 属性节点对象 设置属性节点

element内置的属性 element.属性名

获取id值为box的元素
var box = document.getElementById("box")

1.className

返回class名字，同样我们可以进行赋值，set元素属性

console.log(box.className);
​
设置class属性名
​
box.className='jack'

2.id

获取id名字

console.log(box.id);
​
box.id = 'rose'

3.title

获取HTML里的标题名字

console.log(box.title);
​
box.title='刘德华'

style 样式操作

element.style.样式名
给背景颜色赋值为红色
box.style.background='red'
​
获取背景颜色
​
console.log(box.style.background);

操作文本节点

Text文本节点对象 设置文本节点

1.innerText

获取显示文本，赋值就是设置对应的文本

console.log(box.innerText);//获取里面显示的文本（忽略标签）
​
box.innerText='睡了没'//覆盖之前写里面写的所有内容
​
box.innerText='<b>吃了没<b>'//设置文本 是不会解析里面的标签

2.innerHTML

获取显示的HTML内容，赋值就是设置对应的HTML内容

box.innerHTML = '<b>吃了吗<b>'//它会解析里面的b标签，显示为HTML加粗效果
console.log(box.innerHTML);//会将里面所有的HTML代码全部获取

Dom补充

document.getElementById() //通过id获取 返回的是元素
document.getElementsByClassName() //通过class获取 返回的是htmlCollection
document.getElementsByTagName() //通过标签名获取 返回的是htmlCollection
document.getElementsByName() //通过name属性获取 返回的是NodeList
document.querySelector() //通过选择器获取第一个 返回的是元素
document.querySelectorAll() //通过选择器获取所有的 返回的是NodeList
元素共有属性 赋值就是设置 不赋值就是获取

最后

以上就是曾经小松鼠为你收集整理的JavaScript DOM的介绍以及使用方法的全部内容，希望文章能够帮你解决JavaScript DOM的介绍以及使用方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。