JS操作元素

操作元素

创建元素

1.document.write() 直接把内容写入页面

document.write('<div>123</div>')
或
document.write('<div>')

注：文档流执行完毕则会导致页面重绘（）

2.innerHTML

element.innerHTML='<div>123</div>'

3.document.createElement()

var div=document.createElement('div');

element.appendChild(div);(在元素)

element.insertBefore(div);

注：当大量创建标签时inner.HTML使用空数组.push的方式添加字符串标签，再使用join拼接输出的效率比createElement的效率更高，但是inner.HTML使用+=拼接字符串的输出效率非常低

改变元素内容

element.innerText=''

获取元素从开始到终止位置的内容，去除标签，同时空格和换行也会去掉

element.innerHTML=''

获取元素从开始到终止位置的内容，包括标签，同时保留空格和换行

这两个属性都是可读写的，可以获取元素内的内容

改变元素属性

获取元素后，修改对象内相应的属性src、href、id、alt、title等

1.获取属性值

element.属性 获取属性值

element.属性=‘值’ 设置属性值

2.增删class名

Element.classList 

是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合.

增加类名

Element.classList.add(" ");

切换类名

Element.classList.toggle(" ");

移除类名

Element.classList.remove(" ");

自定义属性的操作

设置自定义属性

element.setAttribute(name, value)；

获取自定义属性

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

兼容性获取 element.getAttribute(‘data-属性’);

删除自定义属性

element.removeAttribute(‘属性’); 移除属性

H5新增自定义属性规范(data-开头)

H5新增 element.dataset.属性 或者 element.dataset[‘属性’]

注：自定义属性(除data-)带’-'时调用需用驼峰命名法
eg：
属性 data-list-name

调用 dataset[‘listName’]

改变表单属性

可以操作表单属性 type、value、checked、selected、disabled

改变样式属性

js操作元素只能修改行内样式，优先级较高

1.element.style 行内样式操作（只能获取行内样式）

2.window.getComputedStyle(元素).样式名（可以获取行内或非行内样式）

3.element.className 类名样式操作

样式较多时className类名方式更方便，会直接更改元素类名，覆盖原先类名

获取元素宽高（还能获取元素位置等信息）

console.log(ele.getBoundingClientRect().width);

console.log(ele.getBoundingClientRect().height);