js操作元素样式、元素内容、元素属性的方法

js操作元素的样式

1.元素.style.属性='属性值'
var div=document.getElementById('box')
div.style.width='300px';
div.style.height='300px';
div.style.backgroundColor='red';   //css中有-的属性，在js中要改成驼峰命名法

2.div.style.属性     获取元素的样式
var div=document.getElementById('box')
console.log(div.style.width);
console.log(div.style.height);
console.log(div.style.backgroundColor);   //如果要通过style获取样式，只能获取行内样式

3.通过操作类，改变元素的样式
var div=document.getElementById('box')
div.className += ' one'    //一定要记得+空格

js操作内容，操作元素

操作内容：

普通元素.innerHTML = “值”； 会把标记执行渲染
普通元素.innerText = “值”； 将值原封不动的展示出来，即使里面有标记

var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来。
var s = 普通元素.innerText; 值会把此元素下的文本取出来，标记不予理会。

表单元素 - 只能使用value 来取值赋值
表单元素.value = “值”;
var s = 表单元素.value;

操作相关元素

var a=document.getElementById(‘id’); 找到a

var b=a.nextSibling; a的下一个同辈 空格回车也算一个同辈

var c=a.previousSibling; a的上一个同辈 回车 空格也算一个同辈

var b=a.parentNode; a的父级元素

var b=a.childNodes; a的子元素 是一个数组

var b=a.firstchild; a的第一个子元素 lastchild 最后一个子元素 childNodes[ n] 找第n个子元素

alert（nodes[i] instanceof Text）判断是不是文本 是返回true 不是返回false

有[i]说明是在循环

元素的创建、添加删除

var a=document.getElementById(‘id’); 找到a

a.appendChild(子元素) 在a里面添加子元素 子元素同上 可以是div

a.removeChild(子元素); 删除子元素

a.selectIndex 查找的是第几个

a.options[a.selectIndex] 按下标取出第几个option对象

创建标签

document.creatElement(“div”); 这里的div 只是其中的一个标签 可以写任何标签

获取元素的方法

1.通过id获取元素 getElementById（“id名”） 返回的是一个元素对象

2.通过className获取 getElementByClassName（“class名”） 返回的是一个类数组（多个对象放在一个数组中）

3.通过标签名来获取元素 getElementsByTagName（“标签名”） 返回的是一个类数组

4.通过name名来获取元素 getElementByName（“name属性名”）;

5.通过选择器获取满足条件的第一个对象 document.querySelector(“选择器”)；返回的是一个元素对象