JavaScript基础学习4

Posted 2020-08-17

DOM对象(document object model文本对象模型 )

一、核心DOM

1.核心DOM对标签属性的操作(对属性(attribute)进行增改（a）查（b）删(c))

a.操作的标签对象.setAttribute(属性名，属性值)：设置标签的属性

b.操作的标签对象.getAttribute(属性名):获得标签属性

c.操作的标签对象.removeAttribute(属性名)删除标签属性

2.核心DOM对标签的操作

创建标签

     语法：

           document.createElement(“标签名”)

            如1：var tab_obj=document.createElement(“table”)

追加标签  

     父对象.appendChild(要追加的标签对象)，将标签对象追加父对象的末尾

     如2：document.body.appendChlid("tab_obj");(结合如1)

  父对象.insertBefore(要追加的标签对象, 在谁之前进行追加)，将标签对象追加谁的最前面

移除标签

      父对象.removeChild(要删除的标签对象),将标签对象追加父对象的末尾

二.html DOM

方法：

document.getElementById(ID的属性值)  

作用：通过id的属性值来获取标签对象   

document.getElementsByTagName(“标签名”)

父对象. getElementsByTagName(“标签名”)

作用：通过标签名来获取对象 

注意：这里返回的是一个数组集合 需要使用下标来进行访问  就算获取到只有一个标签 它也是一个数组集合

document.getElementsByName(name的属性值)

说明：通过标签中的Name的属性值来获取元素

注意：这里返回的是一个数组集合需要使用下标来进行访问 就算获取到只有一个标签它也是一个数组集合

HTML DOM对标签属性的操作

增: 要操作的标签对象.属性名 = “值”

删: 要操作的标签对象.属性名 = “”

改: 要操作的标签对象.属性名 =“重新赋值”

查: 要操作的标签对象.属性名

但是以上对标签属性的操作均不包含对class属性的操作   如果要对标签里面的class属性的操作 一定要把class改为className

   格式：

        要操作的标签对象.className 

三、CSS DOM

    格式：

        赋值：  要操作标签对象.style.css样式属性 = “CSS属性值”

        取值：  要操作标签对象.style.css样式属性