DOM Document Object Model(文档对象模型)

dom利用js操作html和css

标签--元素节点
操作元素节点--element
属性--属性节点
操作属性节点--attribute
文本--文本节点
操作文本节点--text

<div class='content' id = 'box'>dididi</div>

    //查	获取元素节点的方式
    通过选择器获取
    <script>
        
    //id选择器	
    var box=document.getElementById('box')//获取id值为'box'的元素
    
    //class选择器	通过class属性名来获取对应的元素,传入的参数是string类型的class名字
    var content=document.getElementsByClassName('content')
    //返回值为一个htmlCollectoinof<Element>,返回值是一个集合
    //htmlCollectoin是类似与数组的一种结构,具备下标和length属性,
    //但不具备数组其他方法
    //可以通过下标获取对应的htmlCollectoin里面的元素
    
    //标签选择器
    var div = getElementsByTagName('div')
    //通过name值来获取  返回的类型是一个nodeList,不是htmlCollectoin,
    //同样具备下标和length属性,但方法比htmlCollection多
    var divName = document.getElementsByName('divName')
    
    //复合选择器 返回第一个匹配选择器的元素,返回的是一个element(元素)
    var selectDiv= document.querySelector('div')//
    var selectAll = document.querySelectorAll('div')//
    
    //操作属性节点 attribute    Attr属性节点对象 设置属性节点
    //element内置属性   element.属性名
    var box=document.getElementById('box');//获取id为box的元素
    console.log(box.className);//返回class名字,同时可以进行设置
    box.className='jack'//设置class属性名
    //id
    console.log(box.id);//获取id名字
    box.id= 'rose'
    //title
    console.log(box.title);//获取title名字
    box.title='kangkang'
    
    //style 样式操作 element.style.样式名
    box.style.background= 'red'//给背景颜色赋值
    console.log(box.style.background);//获取背景颜色

    //操作文本节点  text    Text    设置文本节点
    //innerText 
    console.log(box.innerText);//获取里面显示的文本(忽略标签)
    box.innerText='dididididi'//设置文本节点,覆盖之前的所有内容
    box.innerText= '<b>dididididi</b>'//设置文本,不会解析标签
    //innerHTML 获取显示的html内容
    console.log(box.innerHTML);//会将里面所有的html代码全部获取
    box.innerHTML= '<b>dididididi</b>'//会解析里面的b标签,显示为加粗效果

    </script>