DOM案例

# DOM案例

# 排它思想

首先排除其它人，然后才设置自己的样式

var btns = document.getElementsByTagName('button');
for(var i = 0;i < btns.length;i++){
	for(var i = 0;i < btns.length;i++){
		btns[i].style.backgroundColor = '';
	}
	this.style.backgroundColor = 'pink';
}

1
2
3
4
5
6
7

换肤案例

var imgs = document.querySelector('.baidu').querySelectorAll('img');
for(var i = 0; i < imgs.length;i++){
	imgs[i].onclick = function(){
		document.body.style.backgroudImage = 'url('  + this.src+')';
	}
}

1
2
3
4
5
6

# 表格全选取消案例

See the Pen 表单全选和取消全选 by yuandehua (@yuandehua) on CodePen.

# 自定义属性

element.属性 获取自身属性值

element.getAttribute('属性') 获得自定义属性值

element.romoveAttribute('index') 移除属性

使用

div.id = 'test';
div.className = 'navs';
div.setAttribute('index',2);
div.removeAttibute('index');

1
2
3
4

# H5新增获取自定义属性

规范

H5规定自定义属性，用 data-xxx 开头作为属性名并赋值

<div date-index = "1"></div>

获取自定义属性

兼容性获取 element.getAttribute();
H5新增 element.dateset.index || element.dateset['xxx']

<div date-last-name='yuadh'></div>
<script>
    var div = document.querySelect('div');
    //驼峰命名法
	console.log(div.dataset.lastName);
    console.log(div.dateset['lastName']);   
</script>

1
2
3
4
5
6
7

# 换栏案例

See the Pen 换栏案例 by yuandehua (@yuandehua) on CodePen.

# 节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等）node

所有HTML元素均可被修改，也可以被创建或删除

概述

一般地，节点至少拥有 nodeType （节点类型）、nodeName（节点名称）、nodeValue（节点值）三个

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3

# 父级节点

node.parentNode

找不到返回NULL

# 子级节点

parentNode.childNodes

返回包含指定节点的子节点的集合，且包含所有的子节点，元素节点、文本节点等

parentNode.children

只返回所有的子元素节点

# 得第一或最后元素节点

firstChild lastChild

console.log(ol.firstChild);

console.log(ol.lastChild);

获取的是子节点不管是文本节点还是元素节点
fristElementChild fristElementChild

console.log(ol.firstElementChild);

console.log(ol.lastElementChild);

有兼容问题
实际常用写法

console.log(ol.children[0]);

console.log(ol.children[ol.children.length-1]);

# 兄弟节点

//返回当前元素的下一个兄弟节点，找不到返回null
node.nextSibling
//返回当前元素的上一个兄弟节点，找不到返回null
node.previousSibling

1
2
3
4

此类方法返回的节点包含元素节点，文本节点

//返回当前元素的下一个兄弟元素节点，找不到返回null
node.nextElementSibling
//返回当前元素的上一个兄弟元素节点，找不到返回null
node.previousElementSibling

1
2
3
4

此类方法有兼容性问题

解决封装函数

function getNextElementSibing(element){
    var el = element;
    while(el = el.nextSibling){
          if(el.nodeType === 1){
             return el;
          }
    }
    return null;
}
function getpreviousElementSibing(element){
    var el = element;
    while(el = el.previsousSibling){
          if(el.nodeType === 1){
             return el;
          }
    }
    return null;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 创建节点

document.createElement('tagName')

创建指定的 HTML 元素。动态创建元素节点

添加节点

node.appendChild(child)

将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child,指定元素)

将一个节点添加到父节点的指定子节点前面

案例

var li = document.creatElement('li');
var ul = document.querySelector('ul');
ul.appendChild(li);
var lili = document.creatElement('li');
ul.insertBefore(lili,ul.children[0]);

1
2
3
4
5

评论发布案例

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
        
    </ul>
    <script>
    	var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onlick = function(){
            if(text.value == ''){
               alert('error');
               return false;
            }else {
                var li = document.creatElement('li');
                li.innerHTML = text.value;
                ul.insertBefore(li,ul.children[0]);
            }
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

编辑

上次更新: 2023/02/07, 14:51:48

← js接口节点操作→