webApi第一天

以前渲染的方式

后期的数据模拟一定要添加数据标识id

（1）模拟数据，注意添加数据id

（2）渲染：将数据生成动态结构的过程

(1)渲染 ==> 数据+静态结构

(2)遍历数据源，拼接字符串，填充到页面中

（3）.将生成的结构输出

什么是Dom??

(1)文档对象模型

(2)可以操作网页内容，实现交互

什么是Dom对象？？

浏览器会根据html标签生成JS对象

1.dom和dom元素是对应关系

2.操作dom对象的本质就是在操作页面dom元素

3.我们所需要做的事情就是 通过浏览器提供的api获取到你想要的dom元素，调用浏览器提供的 api进行元素的操作，操作dom对象的结果会体现到页面上

document.querySelector() 与 document.querySelectorAll()

(1) document.querySelector()

1.没有获取到元素,就返回null

2.只能取到满足条件的第一个元素

3.querySlector获取的元素可以直接操作

(2) document.quertSelectorAll()

1.获取满足条件的所有元素

2.没有获取匹配元素,返回一个空的伪数组 [ ] nodeList

3.querySelctorAll获取的元素是一个伪数组，需要遍历进行操作

(3) 访问一个未定的对象时， *** is not defined

let myspan = document.querySelector('sapn')   //这里获取不到相应的网页，返回null
myspan.style.color = 'red' //控制台报错 无法读取null的属性

访问一个对象不存在的属性时，返回undefined

 let spans = document.querySelectorAll('span')
    console.log(spans);
    spans.style.color = 'red' //控制台报错  spans.style 是undefined  spans这个伪数组里没有style这个属性,返回undefined

元素内容的操作

1.document.write() 只能追加到body中,可以解析标签

2.innerText 可以追加给任意元素,不能解析标签

3.innerHTML 可以追加给任意元素,可以解析标签

4.如果innerText innerHTML 没有赋值==>取值

元素的属性赋值和读取

    let img = document.querySelector('img')
    img.alt = '666' //只适用于内置属性
    img.name = '周杰伦'
    img.pname = '周周' //自定义属性没有效果
    let inp = document.querySelector('input')
    console.log(inp.value); //没有赋值就是取值

元素的样式操作

 // 1.第一种方式   元素.style.属性
      p.style.color = 'red'
      //2.第二种方式    元素.style[]
      let color = 'color'
      p.style[color] = 'yellow'
      p.style['font-size'] = '30px'

元素的样式类名操作

    // 1.className:就是设置元素的class 但是class在js是关键字,故而用className代替,缺点        是会覆盖原来的类名
    // 2.classList
    // (1)元素.classList.add('类名')  添加类,在原有的类名之上新增一个新的类名
          div.classList.add('mydiv', 'active') //添加多个类名
    // (2)元素.classList.remove('类名')   删除指定类名
    // (3)元素.classList.toggle('类名')   切换类名
    // (4)元素.classList.contains('类名')   判断是否有该类名

\