JS中 DOM对象里的节点基础知识以及各种基本操作

DOM 文档对象模型
dom赋予了我们操作页面的能力
js会把html页面的内容解析成为dom树的结构,节点构成的
创建节点,删除节点,…

            1.如何获取节点
                通过元素的id获取节点  getElementById("id值")
                    只能获取一个,唯一的因为id是唯一的
                    主语:document
                通过标签名字获取节点  getElementsByTagName("标签名")
                    获取一组元素
                    主语:document ,父级节点
                通过className获取节点 getElementsByClassName("class属性值")
                    获取一组元素
                     主语:document ,父级节点
                通过name属性值获取节点
            2.操作节点
            3.完成案例

创建节点

1.创建节点 createElement(‘元素名’)

        2.插入节点appendChild
            父节点.appendChild(子节点)
            参数:要插入的节点
            王父节点的最后追加子节点

        3.2.插入节点insertBefore(节点1,节点2)
            父节点.insertBefore(节点1,节点2)
            参数:
                节点1:要插入的节点
                节点2:插入的位置
                把节点1插入到节点2之前
                2个参数必须都存在
           当第二个参数为null|undefined时候,作用和appendChild相同都是追加

表单元素获取值 value
普通标签获取标签对中的内容 innerHTML innerText

替换节点 replaceChild(node1,node2)
参数:
node1 新节点
node2 被替换的节点
主语:父节点
返回值:被替换的节点
如果是已存在的节点进行替换,相当与剪切

克隆节点 cloneNode(boolean)
主语: 要克隆的元素节点
参数: true 子孙节点同时克隆
false 不克隆子孙节点 默认
可以克隆属性,样式,不能克隆js功能

删除节点 父节点.removeChild(被删除的节点)
表单节点
1.获取表单中的元素节点
表单节点.name属性值
2.获取表单元素的值
表单元素节点.value
3.判断是否被选中 单选,多选,下拉框

        表单中常用事件:
            oninoput
            onchange
            *** 表单的提交方式
            1) submit 直接提交
            2) 表单添加onsubmit,事件中校验是否满足提交的条件,如果不满足return false,不允许提交-->使用要reuturn 函数();
            onsubmit 表单的事件,当表单被点击submit时触发事件
            onreset  表单的事件
            3)button按钮+submit() 按钮触发点击事件,事件判断,满足条件就调用submit()提交
            submit()
            reset()