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

3.9 KiB Raw Blame History Unescape Escape

dom

dom 节点树

js操作dom

3.9 KiB

Raw Blame History