DOM元素 DAY18

一、操作元素

1、*innerHTML：获取和设置元素的内容，并且识别标签——没有兼容性问题，老IE也支持。

         获取：elem.innerHTML；——往往用于判断

        设置：elem.innerHTML="新内容" ——添加/修改

2、textContent: 获取 和 设置元素的文本，不能识别标签—— 有兼容性问题，老IE不支持。

                获取：elem.texContent; ——往往用于判断

                设置：elem.textContent="新文本" ——添加/修改

        解决：innerText ；——老IE和现在的主流浏览器都支持

3、*value: 解决 和 设置input的内容

                获取：input.value; ——往往用于判断

                设置：input.value="新文本"；——添加/修改

二、元素的属性：

1、*获取属性值：                                                                —往往用于判断

        核心DOM：elem.getAttribute("属性名"）；                  —虽然API比较繁琐，但是无敌

        HTML DOM：elem.属性名                                            —虽然简单，但是不能操作自定义属性

2、*设置属性值：                                                                    —添加/修改

        核心DOM：elem.setAttribute("属性名","属性值")；        —虽然API比较繁琐，但是无敌

        HTML DOM：elem.属性名="属性值"                               —虽然简单，但是不能操作自定义属性

3、*删除属性值：                                                               

        *核心DOM：elem.removeAttribute("属性名")                —完整删除整个属性节点

        HTML DOM：elem.属性名=" "                                        —删不干净，只能删除属性值，属性节点依然存在，而有的属性，只要写出属性名就已经有作用（比如：href、disables、readonly）

4、判断有没有                                                                        —没用

        elem.hasAttribute（"属性名"）；—结果是一个布尔值，但是没有用，只能判断有没有，不能判断具体属性值是什么

        *推荐判断还是使用  * 获取属性值  

建议：以后优先使用HTML DOM，实现不了的再用 核心DOM补充

        小心：1、HTML DOM   class要写为lassName

                2、HTML DOM  不能操作自定义属性

三、元素的样式：

1、内联样式：

        优点：1、优先级高         2、不会牵一发动全身

        获取：elem.style.css属性名；

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

                特殊：1、css属性名，把横线去掉换成小驼峰命名法

                           2、获取也只能获取内联样式-小缺点

2、样式表

        1、获取你想要操作的样式表

                var sheet=document.styleSheets[i];

        2、获取所有样式规则

                var rules=sheet.cssRules;

        3、打桩输出 数出你需要操作的某个样式规则

                var rule=rules[i]; 

        4、对此规则获取或者设置

                console.log(rule.style.banckground);

                rule.style.background="skyblue";

四、创建元素：2步；

        1、创建空标签：var elem=document.createElement（"标签名"）;

                        例如：var a=document.createElement（"a"）;

        2、添加必要的属性和事件 

                elem.属性名="属性值"

                elem.on事件名=function(){操作}

                以上两步只是在js内存中创建出了元素，还需要渲染到DOM树上

五、渲染页面方式：3种

           1、父元素.appendChild(新)；                               —新元素会追加到父元素中当最后一个儿子

           2、父元素.insertBefore(新，已有子元素)；          —新元素会追加到父元素中当儿子，会插到已有子元素的前面

           3、父元素.replaceChild(新，已有子元素)；         —新元素会替换到父元素中当儿子，会替换已有子元素

六、删除元素：

                *elem.remove();

核心DOM总结：增删改查DOM（元素、内容、属性、样式）

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

七、HTML DOM常用对象：HTML DOM就是对核心DOM进行了简化：

        1、Image对象：图片对象：

                简化了创建方式：var img=new Image();

        2、Form对象：表单对象；

        简化了查找元素：var form=document.forms[i];                —获取页面上的第i个form元素

        简化了查找表单控件元素：var inp=form.elements[i]        —获取此form表单中的第 i 个表单空间元素

        3、*Select对象

                属性：1、select.options === select.children 获取到select下面的所有option

                           2、*select.selectedIndex;                             —获取到选中项的下标

                方法：1、*select.add(option);                   —将option上树

                           2、select.remove(i);                        —删除下标为 i 的option

                *专属事件：onchange                                —选中项发生改变后才会触发

        4、*Option对象：

                简化了创建方式：var opt =new Option("innerHTML","value");

                建议你，如果以后希望创建出opt并且放到select中：        完成4个操作

                        select.add(new Option("innerHTML","value"))

        小知识点：表单控件元素必须添加mame,才能传到服务器端/后端

                        有点表单控件还要添加value，用户不能输入只能选择的，我们程序员就要把value提前写好，供用户选择后端