javascript基础-语法1

DOM文档对象模型

概念：提供操作HTML文档的能力，提供API

注意： 下面的ele为获取的标签节点

操作

获取标签元素 - 操作样式 - 文档对象（Document）- 操作内容 - 操作属性

获取标签元素

• document.getElementById('id属性值') 根据id名获取元素节点，而且是object对象类型
• document.getElementByTayName('标签名') 根据标签名获取html元素节点，同时返回的也是一个数组
• document.getElementsByClassName('calss属性值') 根据calss名获取元素节点，得到的结果是一个数组
• document.getElementsByName('name属性值') 根据name命名的标签获取元素节点，得到的也是一个数组
• querySelcctor()
• querySelectorAll()

操作内容

• innerhtml 获取标签内容或者设置标签内容
• innertext 获取文本内容或者修改文本内容
• value 获取表单内容和设置表单内容

设置内容

• ele(获取的标签节点).innerhtml = '内容' 内容中可以是解析的标签
• ele.innertext = '内容' 纯文本内容，不能添加标签

操作样式

• ele.style.color = 'red' 改变标签样式
• ele.className = '类名' 改变类名
• ele.classLiist.add('类名') 添加类名
• ele.classList.remove('类名') 删除类名

操作属性

• setAttribute('属性名'，'属性值') 设置属性
• removeAttribute('属性名') 移除属性
• getAttribute('属性名') 获取属性

this当前对象

• 事件处理函数中this表示 =>事件源

DOM节点对象

dom角度：整个html文档看作一个文档对象document，html文档中所有元素被看作是dom节点对象。

dom节点对象分类

• html标签元素：元素节点
• 标签内容：文档节点
• 标签属性：属性节点

节点层次结构以及查找节点的语法

层次结构：父节点、子节点、兄弟节点
元素之间还有空白的文本节点

获取节点对象

• getElement
• querySelector

查找元素节点

• parenElement 父元素节点
• childrcn 子元素节点
• nextElementSibling 下一个兄弟元素节点
• parenElementSibbling 上一个兄弟元素节点
• parenElement 父元素节点
• firstElementChild 父节点的第一个子元素节点
• lastElementChild 父元素的最后一个子元素节点

查找节点

• parenNode 父节点
• chiildNodes 子节点
• NextSibling 下一个兄弟节点
• previoussibling 上一个兄弟节点
• firstChild 父节点的第一个子节点
• lastChild 父节点的最后一个子节点

动态操作节点

创建节点

• 创建元素节点 var divEle = document.createElement('div') 创建一个div元素节点
• 创建文本节点 var textNode = document.createTextNode('元素') 创建一个文本叫元素的文本节点

添加节点

• 给父节点追加子节点 父节点.appendchild('子节点')
• 在父节点指定子节点前插入新的子节点 父节点.insertBefpre('新子节点'，'原来子节点')

删除节点

• 删除父元素的子节点 父节点.removeChild('子节点')
• 删除子节点 子节点.remove()

替换节点

• 新节点替换父节点下的子节点 父节点.replaceChild(新节点，旧节点)

克隆节点
参数为 true，克隆节点和所有子节点。
参数为 false或者不写，只克隆节点。

• 节点.clone()