本文共 3945 字,大约阅读时间需要 13 分钟。
事件:触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。
var box = document.getElementById('box');box.onclick = function() { console.log('代码会在box被点击后执行'); };
href、title、id、src、className
var link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.log(pic.src);
案例:
点击按钮,切换img标签里的图片
点击按钮显示隐藏div
title 哈哈
var box = document.getElementById('box');box.innerHTML = '我是文本我会生成为标签
';console.log(box.innerHTML);box.innerText = '我是文本我不会生成为标签
';console.log(box.innerText);
" "‘ '& &< < //less than 小于> > // greater than 大于空格 © ©
innerHTML和innerText的区别
innerText的兼容性处理
title
var box = document.getElementById('box');box.style.width = '100px';box.style.height = '100px';box.style.backgroundColor = 'red';
注意
通过样式属性设置宽高、位置的属性类型是字符串,需要加上px
var box = document.getElementById('box');box.className = 'clearfix';
序号 姓名 课程 成绩 1 柳岩 语文 100 2 苍老师 日语 100 3 凤姐 营销学 100 4 芙蓉姐姐 数学 10 5 佐助 英语 100 6 卡卡西 体育 100 7 乔峰 体育 100
Title
document.write('新设置的内容标签也可以生成
');
var box = document.getElementById('box');box.innerHTML = '新内容新标签
';
var div = document.createElement('div');document.body.appendChild(div);
title
Title
var body = document.body;var div = document.createElement('div');body.appendChild(div);var firstEle = body.children[0];body.insertBefore(div,firstEle);body.removeChild(firstEle);var text = document.createElement('p');body.replaceChild(text, div);
案例:
无刷新评论
title
猪猪: | 我喜欢吃肉 |
重点讲父子属性,兄弟属性画图讲解
var box = document.getElementById('box');console.log(box.parentNode);console.log(box.childNodes);console.log(box.children);console.log(box.nextSibling);console.log(box.previousSibling);console.log(box.firstChild);console.log(box.lastChild);
注意
childNodes和children的区别,childNodes获取的是子节点,children获取的是子元素
nextSibling和previousSibling获取的是节点,获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题,IE9以后才支持
总结
节点操作,方法 appendChild() insertBefore() removeChild() replaceChild()节点层次,属性 parentNode childNodes children nextSibling/previousSibling firstChild/lastChild
转载地址:http://nixmi.baihongyu.com/