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(),将元素追加到指定对象的前面
|
|||
|
|
```
|