129 lines
3.9 KiB
Markdown
129 lines
3.9 KiB
Markdown
# dom
|
||
|
||
## dom 节点树
|
||
dom 包含 ：元素节点，文本节点，注释节点
|
||
demo:
|
||
```
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
hello world
|
||
</body>
|
||
</html>
|
||
```
|
||
```
|
||
html
|
||
head
|
||
title
|
||
meta
|
||
|
||
text --回车
|
||
body
|
||
text
|
||
```
|
||
|
||
## js操作dom
|
||
|
||
* 查询元素并获取元素的值
|
||
查询元素：
|
||
* 根据标签选取：document.getElementsByTagName('目标标签')
|
||
* 根据class选取：document.getElementsByClassName('目标类名')
|
||
* 根据id选取：document.getElementById('目标id')
|
||
* js直接访问html对象：
|
||
* document.title 获取文档的标题
|
||
* document.body 获取body元素
|
||
* document.head 获取head元素
|
||
...
|
||
|
||
通过id获取document.querySelectorAll("#old")
|
||
通过标签获取 document.querySelectorAll("p")
|
||
通过类名获取document.querySelectorAll(".demo2")
|
||
|
||
|
||
获取值：
|
||
* element.innerHTML 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
|
||
* element.innerText 也就是从对象的起始位置到终止位置的全部内容,去除Html标签。
|
||
|
||
特别说明 innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用
|
||
innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
|
||
|
||
```
|
||
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>
|
||
|
||
```
|
||
获取属性值：
|
||
方法一：element.属性名
|
||
eg:document.write(document.getElementById("image").src)
|
||
|
||
方法二：element.getAttribute('属性名')
|
||
eg:
|
||
str=document.getElementsByTagName('p')[0]
|
||
var attr=str.getAttribute('name')
|
||
|
||
* 删除元素 自身
|
||
element.remove()
|
||
|
||
* 修改元素
|
||
* 修改元素的文本内容
|
||
* element.innerHTML="修改后的文本内容"
|
||
* elenment.innerText="修改后的文本内容"
|
||
* 修改元素的属性
|
||
* 方法一：
|
||
element.属性名="属性值"
|
||
demo:
|
||
```
|
||
document.getElementById("myImage").src = "landscape.jpg";
|
||
```
|
||
* 方法二：
|
||
element.setAttribute('属性名','属性值')
|
||
eg:
|
||
```
|
||
var myele=document.createElement('div')
|
||
myele.setAttribute('class','box')
|
||
|
||
```
|
||
|
||
* <p style="color:red;font-weight:bold">创建元素:</p>
|
||
|
||
* 创建新的html节点
|
||
document.createElement('要创建的标签名')
|
||
|
||
* 为新创建的节点添加文本内容
|
||
element.innerHTNL="想要添加的文本内容"
|
||
element.innerText="想添加的文本内容"
|
||
|
||
* 为新创建的添加属性及属性值
|
||
方法一： element.setAttribute('属性名','属性值')
|
||
方法二： element.属性名='属性值'
|
||
|
||
* 查找一个现有的元素（新元素的父级元素）
|
||
* 向已有的元素追加新元素
|
||
* fuelement.append(创建的新元素)
|
||
|
||
demo:
|
||
```
|
||
var box = document.createElement('div')
|
||
box.innerHTML = 'happy new year'
|
||
box.setAttribute('style', 'width:100px;height:100px;background:red;color:white')
|
||
var main = document.body
|
||
main.append(box)
|
||
|
||
```
|
||
|
||
追加元素的方式：
|
||
* append(),在父级最后追加一个子元素
|
||
* appendTo(),将子元素追加到父级的最后
|
||
* prepend(),在父级最前面追加一个子元素
|
||
* prependTo(),将子元素追加到父级的最前面
|
||
* after(),在当前元素之后追加（是同级关系）
|
||
* before(),在当前元素之前追加（是同级关系）
|
||
* insertAfter(),将元素追加到指定对象的后面
|
||
* insertBefore(),将元素追加到指定对象的前面
|
||
```
|