自定义属性

获取属性值

  • element.属性 :获取内置属性值

  • element.getAttribute(‘属性’) :获取自定义属性值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="demo" index="1" class="nav"></div>
    <script>
    var div = document.querySelector('div');
    // 1. 获取元素的属性值
    // (1) element.属性
    console.log(div.id); //demo
    //(2) element.getAttribute('属性')
    console.log(div.getAttribute('id')); //demo
    console.log(div.getAttribute('index')); //1
    </script>

设置属性值

  • element.属性 = ‘属性值’
  • element.setAttribute (‘属性’,‘属性值’) :设置自定义属性值
1
2
3
4
5
6
// (1) element.属性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer');

移除属性

element.removeAttribute ('属性')

h5自定义属性

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>

节点

网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。

一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

  • 元素节点 nodeType 为1

  • 属性节点 nodeType 为2

  • 文本节点 nodeType 为3(文字、空格、换行)

    实际开发中,节点操作主要操作元素节点

父级节点

node.parentNode

parentNode返回某节点的父节点(最近的),没有则返回null

1
2
3
4
5
6
7
8
<div class="demo">
<div class="dad">
<span class="son">×</span>
</div>
</div>
<script>
console.log(son.parentNode);
</script>

子节点

parentNode.chlidNodes(标准)

返回值包含所有子节点,包括元素、文本节点等,so一般不用childNodes

parentNode.children(非标准)

返回值只有元素字节,so提倡用children

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>
<li>胖虎同学</li>
<li>panghutx</li>
<li>www.wangyouwu.cn</li>
<li>blog.wangyouwu.cn</li>
</ul>
<script>
// DOM 提供的方法(API)获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); //3
console.log(ul.childNodes[1].nodeType); //1
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
console.log(ul.children[0]); //第一个li
console.log(ul.children[ul.children.length - 1]);//最后一个li
</script>

创建/添加节点

  1. 创建节点

    document.creatElement('tagName')

  2. 添加节点

    node.appendChild(child) 将节点添加到父节点的子节点列表末尾

    node.inserBefore(child,指定元素) 将节点添加到父节点的子节点列表开头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
<li>胖虎同学</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
</script>

删除节点

node.removeChild()

从node节点中删除子节点,返回的是删除节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button>删除</button>
<ul>
<li>胖虎</li>
<li>胖虎同学</li>
<li>胖虎同学的博客</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>

克隆节点

node.cloneNode()

  • 如果括号参数为空或false,则为浅拷贝,只克隆节点本身,不克隆里面的子节点
  • 括号参数为true,则为深拷贝,会克隆字节本身以及里面所有子节点
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>

DOM重点总结

文档对象模型(Document Object Model),处理可拓展标记语言的编程接口,可以改变网页内容、结构、样式。

关于DOM操作,主要针对元素操作,主要有创建、增删改查、属性操作、实践操作。

  • 创建:

document.write innerHTML creatElement

  • 增加

appendChild insertBefore

  • 删除

removeChild

1551164907830

1551164936214

  • 属性操作

1551164985383

  • 事件操作

1551172699854