提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、创建元素
1.document.write
2.innerHTML
3.createElement
使用方法
1. document.write() 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function() {
// document.write('<div>123</div>');
// }
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }``
```javascript
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
二 增加元素
- appendChild
- insertBefore
// 先创建li
var li = document.createElement('li');
//先有li才赋值
li.innerHTML = text.value;
// 2.添加元素
// ul.appendChild(li);
// 最新留言放前面
ul.insertBefore(li, ul.children[0]);
三、 删除元素
- removeChild
// 2.删除元素
node.removeChild(child)
node父级 child删除的元素位置
四、修改元素
主要修改dom的元素属性,dom元素的内容、属性, 表单的值等
1.修改元素属性: src、href、title等
2.修改普通元素内容: innerHTML 、innerText
3.修改表单元素: value、type、disabled等
4.修改元素样式: style、className
五、查询元素
1.DOM提供的API 方法: getElementById、getElementsByTagName 古老用法 不太推荐
2. H5提供的新方法: querySelector、querySelectorAll 提倡
3.利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
// 2.previousSibling 是上一个兄弟节点,包含元素节点或者文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 用子节点 childNodes 所有的子节点,包括 元素节点,文本节点等
// parentNode.children 返回所有的子元素节点,其余不反回
// 返回第一个节点和最后一个节点 firstChild和lastChild 不管是文本节点还是元素节点
//2 . firstElementChild和lastElementChild 返回的是第一元素和最后一元素节点
六、属性操作
- setAttribute:设置dom的属性值
- getAttribute:得到dom的属性值
- removeAttribute移除属性
七、事件操作
给元素注册事件, 采取 事件源.事件类型 = 事件处理程序