操作元素

1、内容

（1）innerHTML：支持标签，并且没有兼容性问题

获取：elem.innerHTML;
设置：elem.innerHTML="新值";

(2)textContent：不支持标签，并且有兼容性问题，老IE：innerText。（老IE不支持textContent，主流浏览器都支持innerText）

获取：elem.innerText;
设置：elem.innerText="新值";

（3）value：专门为input、select准备的

获取：elem.value;
设置：elem.value="新值";

2、属性

（1）获取属性值：

核心DOM：万能的，可以操作一切属性

elem.getAttribute("属性名");

HTML DOM：只能操作标准属性，并且class需要写出className

elem.属性名;

（2）设置属性值：

核心DOM：万能的，可以操作一切属性

elem.setAttribute("属性名","值");

HTML DOM：只能操作标准属性，并且class需要写出className

elem.属性名="新值";

（3）删除属性：

核心DOM：

elem.removeAttribute("属性名"); - 删干净整个属性节点

HTML DOM：

elem.属性名=""; - 赋值为空，删不干净，属性值确实没了，但属性名还在，有的属性只需要属性名也具有效果（href、disabled、readonly）

（4）判断属性：

核心DOM：

elem.hasAttribute("属性名");

更推荐：

if(a1.getAttribute("属性名")=="属性值"){
    console.log("有并且是");
}

3、样式

内联：优先级最高，只会操作某个元素，不会牵一发动全身。 css属性名如果有横线，去掉横线写为小驼峰命名法

获取：elem.style.css属性名;
设置：elem.style.css属性名="css属性值";

样式表：4步

//获取哪一个样式表
var sheet=document.styleSheets[1];
//获取所有的样式规则
var rules=sheet.cssRules;
//获取到了想要操作的样式规则
var rule=rules[36];
//修改或获取样式
rule.style.background="purple";

一切的获取都是为了判断比较，一切的设置都是在做修改操作

创建元素&渲染页面&删除元素

1、创建元素——3步

1、var 空标签=document.createElement("标签名");

2、设置必要的属性或事件

空标签.属性名="值"
空标签.on事件名=function(){
    操作;
}

3、渲染页面元素：3种

*父元素.appendChild(新元素);//新元素会插入到父元素里面的末尾
父元素.insertBefore(新元素,已有子元素);//新元素会插入到父元素里面的已有子元素之前 - 不推荐：修改其他的人下标
父元素.replaceChild(新元素,已有子元素);//新元素会替换掉父元素里面的已有子元素

4、删除元素：

	元素.remove();

HTML DOM提供了一些常用对象

1、image：简化了创建

var img=new Image();

强调：在DOM中，不是人人都具有构造函数创建方式

2、form：简化了查找

查找form元素：var form=document.forms[i];
查找表单控件：var input=form.elements[i];
专属事件：onsubmit事件 -> 提交的一瞬间会执行，也可以阻止提交return false;

3、*select：

属性：2个

（1）options === children：获取到select下面的所有的option

（2）*selectedIndex - 获取到当前选中项的下标，只要是做联动，必不可少

方法：

（1）*select.add(option) - 完全等效于appendChild，追加元素

（2）select.remove(i); - 删除select中的第i个option

专属事件：onchange-> 选中项发生改变时触发

4、*option：简化了创建

var opt=new Option("innerHTML","value");

扩展

1、str.trim();//去掉字符串的开头结尾的空白字符

2、var bool=confirm("提示文字");//用户确认框
    用户点击确定->true
用户点击取消->false

JS第四周——day3