week2.3DOM——每天一个JS小总结

week2.3DOM

DOM作用

DOM:为JS提供了一套操作页面的API

DOM对象：通过JS语言封装好的元素或者属性等节点

document:指代当前的文档，也就是磁盘中的文件

DOM作用：

获取页面中的元素

document.getElementById(""),获取id

querySelector和querySelectorAll区别就是，querySelectorAll获取的是集合

querySelectorAll("") 为ES5新增选择器，支持css3格式选择器，只有这种方式是静态获取索引，适合用于删除操作,可以使用它们的 id, 类, 类型, 属性, 属性值等来选取

getElementsByTagName根据元素的标签名获取元素

getElementsByClassName根据元素的class名获取元素

getElementsByName根据元素的name获取元素

获取/设置元素的属性

获取/设置元素的样式

添加/删除元素

绑定事件—触发响应

 

DOM: 关于对页面中元素和内容的访问和控制。即读/写。为JS提供了一套操作页面的API。

DOM对象：通过JS语言封装好的元素或者属性等节点。

console.log( document.title );

document: 指代当前的文档，也就是磁盘中的文件。

console.log( document );

 

document(文档)对象

属性

document.title：访问当前文档的标题

document.body：访问当前文档的body元素

方法

write()： 在当前页面中输出内容

以及获取元素的方法

DOM

DOM对象的属性和HTML标签的属性几乎是一样的，因为DOM对象本身就是对页面中内容的封装。

属性

查看类型 childNodes：子节点列表

documentElement：文档根元素

nodeType：访问节点的类型

1表示元素节点

2表示属性节点

3表示文本节点

具体参考请访问：http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

nodeName：节点名称

childNode：返回子节点集合，NodeList类型

attributes：返回属性集合，NamedNodeMap类型

firstChild/lastChild：第一个/最后一个子节点

parentNode：返回元素的父节点

方法

获取/设置标签中内容的属性：

innerText:访问元素的文本内容，只会把内容当成纯文本。

innerHTML:访问元素的子级内容，可以把内容当成纯文本也可以解析到DOM树中。

创建

createElement (元素名) ：创建元素节点

createTextNode (文本内容) ：创建文本节点

appendChild(子节点)：添加子节点，主要添加根元素

createDocumentFragment()：创建文档碎片

增删改查元素

appendChild()：添加子节点，包括子元素、文本节点等

getAttribute()：获取指定属性的值

setAttribute()：添加/修改属性

写入操作：parent.appendChild(要插入的节点)

插入操作：parent.insertBefore(新的节点，已经存在的节点)

删除操作：parent.removeChild(要删除的节点)

替换操作：parent.replaceChild(新的节点,被替换的节点)

克隆操作：node.cloneNode(true|false是否包括内容)，false是默认值

案例

获取元素的方法（六个获取）

document.getElementById(' ')

document.querySelector(' ')

document.querySelectorAll(' ')

document.getElementsByTagName(' ')

document.getElementsByClassName(' ')

document.getElementsByName(' ')

<!-- 1.获取元素 -->
<div id="box">id获取</div>
<p>标签获取</p>
<div class="box">类名获取1</div>
<div class="box">类名获取2</div>
<div class="jing">静态获取，适合用于删除</div>
<input type="radio" name='sex'>// 1.获取元素

var box1 = document.getElementById('box')
console.log(box1.innerText);//id获取
​
//通过类名获取的是一个集合
var box2 = document.getElementsByClassName('box')[0]
console.log(box2.innerText);//类名获取2
​
var box3 = document.querySelector('.jing')
console.log(box3.innerText,document.querySelector('#box'));
//静态获取，适合用于删除 <div id="box">id获取</div>
​
var box4 = document.querySelectorAll('div')[1]
console.log(box4.innerText);//类名获取1
​
var box5 = document.getElementsByName('sex')
console.log(box5);

访问（9个访问）

document.title // 属性

document.body // 属性

document.write(' ') //生成方法

// 访问title
<title>abc</title>

console.log(document.title);//abc
//访问body
console.log(document.body);//整个body//document.write
console.log(document.write('输出内容'));
console.log(document.write('<p style="color:red">1</p>'));//在页面中生成标签

.childNodes 访问子节点列表

document.documentElement 访问文档根元素

.nodeType 访问节点的类型

.nodeName 访问节点名称

.childNode 访问子节点集合

.attributes 访问属性集合

.firstChild/lastChild 访问第一个/最后一个子节点

.parentNode 访问元素的父节点

console.log(document.childNodes);
console.log(document.documentElement);
​
console.log( document.nodeType );//文档的节点类型是9
console.log( box1.nodeType );//元素节点类型是1
​
console.log(document.nodeName);//#document
console.log(box1.nodeName);//DIV
​
console.log(box1.parentNode);//返回元素的父节点

设置和增删改查（2个设置 3个创建 增删改查克隆）

.innerText 设置或获取标签所包含的HTML+文本信息

.innerHTML 设置或获取标签所包含的文本信息

 

createElement (元素名) ：创建元素节点

createTextNode (文本内容) ：创建文本节点

appendChild(子节点)：添加子节点，主要添加根元素

<div id="box">id获取</div>
var box1 = document.getElementById('box')

​
box1.innerText='呜呜呜'
console.log(box1.innerText);//呜呜呜
​
box1.innerHTML =' <p style="color:red" >哈哈哈</p>'
console.log(box1.innerText);//哈哈哈//用js创建ul列表
var ul = document.createElement('ul')//创建ul节点
var li = document.createElement('li')//创建li节点
var txt = document.createTextNode('创建文本节点')//创建文本节点
​
li.appendChild(txt)//添加子节点
ul.appendChild(li)//添加子节点
​
document.body.appendChild(ul);// 将ul放入body节点中

属性（4个属性）

getAttribute()：获取指定属性的值

setAttribute()：添加/修改属性

document.title：访问当前文档的标题

document.body：访问当前文档的body元素