JavaScriptday10:dom

目录：

• Dom基础

Dom文档对象模型:

    DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

• 作用：用于操作html中标签的一些能力，DOM 的核心对象就是 docuemnt 对象
• document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
• document对象：
• document对象属性：
• title：设置浏览器title标签的内容
• document对象方法：
• 1.document.write():输入文本到当前打开的文档
• 2.获取HTML元素：
• 1.getElement类：
• 1.1：getElementById('id属性值')：通过元素id来获得对应的元素
• 1.2：getElementsByClassName('class属性')：通过类名来获取元素，可以是多个元素，返回值是wei一个伪数组，他与数组的区别是不能使用数组的方法但是能够通过下标遍历伪数组的元素
• 1.3：getElementsByTagName('标签名');通过标签名来获取对应元素，返回值与getElementsByClassName('class属性')一致，要遍历才能获得具体值
• 1.4：getElementsByName('name属性')：通过name属性的值来获取元素
• 2.queryselector类：通过css选择器来获取元素
• 

 

3.操作元素内容

• 1、html对象的内容
• 1.1:innerHTML获取选中元素的内容或者给选中元素添加内容[='内容']
• 1.2：innerText获取选中的元素的内容或者给其添加纯文本内容[='内容']
• 2、非html对象的内容：
• value:获取选中的表单元素的内容或给其添加内容[='内容']

4.操作元素css样式：

• style 行内样式
• 
•  className =“class样式类名”
• classList 动态添加移除class类样式
• 1添加样式
  div.classList.add('active');
• 2移除指定样式
  div.classList.remove('active');

• 5.操作属性
• 1.getAttribute('属性名')：获取属性值
• 2.setAttribute("属性名"，“属性值”)：设置属性值
• 3.removeAttribute('属性名'):移除属性名

6.onclick事件绑定引入：

• 元素名.onclik=function(){
• 代码
• }