前端自学之路---DOM

DOM

1、找到标签

直接找：

获取单个元素：document.getElementById('i1')

获取多个元素（列表）：document.getElementsByName('n1')

获取多个元素（列表）：document.getElementsByTagName('div')

获取多个元素（列表）：document.getElementsByClassName('c1')

间接找：

parentElement //父节点标签元素

children      //所有子标签

firstElementChild //第一个子标签元素

lastElementChild  //最后一个子标签元素

nextElementChild  //下一个兄弟标签元素

previousElementSibling //上一个兄弟标签元素

2、操作标签

内容操作:

innerText: 文本

获取标签中的文本内容：

标签.innerText

对标签内部文本进行重新赋值：

标签.innerText = ''

outerText

innerHTML: HTML内容

outerHTML:

value:        //值

属性:

attributes    //获取所有标签属性

setAttribute(key,value)   // 设置标签属性

getAttribute(key)    //获取指定标签属性

/*

var atr = document.createAttribute("class");

atr.nodeValue = "democlass";

document.getElementById('n1').setAttributeNode(atr);

*/

class操作：

className  //获取所有类名

classList  //获取类名列表

classList.remove(cls)  //删除指定类名

classList.add(cls)     //添加类

标签操作：

创建标签：

方式一：

var tag = document.createElement('a');

tag.innerText = 'lxp';

tag.className = 'c1';

tag.href = 'http://www.baidu.com';

方式二：

var tag = '<a class='c1' href='http://www.baidu.com'></a>';

操作标签：

方式一：

var obj = '<input type='text' />';

xxx.insertAdjacentHTML("beforeEnd", obj);

xxx.insertAdjacentElement('afterBegin', document.createElement('p'))

方式二：

var tag = document.createElement('a')

xxx.appendChild(tag)

xxx.insertBefore(tag, xxx[1])

样式操作：

var obj = document.getElementById('i1')

obj.style.fontsize = '32px'

obj.style.backgroundColor = 'red'

提交表单：

document.getElementById('form').submit()

其他操作：

console.log  输出框

alert        弹出框

confirm      确认框

//url和刷新

location.href  获取url

location.href = 'url'  重定向

location.reload()   重新加载

//定时器

setInterval   多次定时器

clearInterval   清除多次定时器

setTimeout      单次定时器

clearTimeout    清除单次定时器

3、事件：

属性：        此事件在何时发生

onabort       图像的加载被中断

onchange      域的内容被改变

onclick       当用户点击某个对象时调用的事件句柄

ondblclick    当用户双击某个对象时调用的事件句柄

onerror       在加载文档或图像时发生的错误

onfocus       元素获取焦点

onkeydown     某个键盘按键被按下

onkeypress    某个键盘按键被按下并松开

onload        一张页面或一幅图片完成加载

onselect      文本被选中

onsubmit      确认按钮被点击

onunload      用户退出页面

对事件需要注意的要点：
this:标签当前正在操作的标签；event封装了当前事件的内容