javascript dom操作（js dom操作方法）

1、DOM document节点
    
    DOM全称document Object Model 即文档对象模型，
    他是一套用来控制HTML文件的规则，
    而document节点是一种具象化的表现形式
    
    注意
        dom规定HTML页面中的 所有元素 都是节点
        
    document节点又被叫做document对象，每个载入浏览器的html文档都会是document对象
    document对象使我们可以从脚本中对html页面的所有元素进行访问
    document节点在页面加载时自动创建
    目的：
        为了在脚本中操作页面，所以DOM规则和document节点
2、Document节点属性

    javascript为document节点提供了很多属性
        doctype/documentElemrnt,body,head 返回文档内部的某个节点
        documentURL、URL、domain、lastModified、locationtitle、readyState 返回文档指定信息
        anchors、form、images、links、script    返回文档内部特定节点的集合
        
        localtion属性
            返回完整的URL：document.location.herf
            返回当前的遵守协议：document.location.protocal
            返回当前页面域名 + 端口号：document.location.host
            返回当前页面域名：document.location.hostname
            返回当前页面端口如果不存在，返回空：document.location.port
            返回当前页面在服务器中路劲：document.location.pathname
            返回当前页面URL中查询字符串：document.location.search 
            跳转到另一个网站:document.location.assign("http://www.muyicheng.xyz")
            重新加载当前显示的页面：location.reload(false) 优先从本地缓存加载
                                location.reload(true)  优先从服务器重新加载
            标题可读可写：document.title
            属性返回渲染当前文档的字符集：document.characterSet
            readyState属性返回当前文档的状态
                加载HTML代码阶段（尚未解析）      "loading"
                加载外部资源阶段    "interactive"
                全部加载完成  "complate"
                注意：
                    这种方法（布尔判断）只能判断一次，
                    如果页面在判断时没有加载完成，那么就无法确定
            集合：
            anchors：返回网页中所有 指定了    name属性的a节点元素
            forms：返回网页中所有表单
            images：返回网页中所有的图片
            links：返回网页中所有链接元素（即带有href属性的a标签）
            scripts：返回网页中所有的脚本
    注意：
        IE浏览器不支持documentURL属性
        document.documentURL === document.URL //true
3、Document节点操作页面元素
a、选中页面元素
    querySelector() 方法返回匹配指定的css选择器的元素节点，
    如果有多个节点满足匹配条件则返回第一个匹配的节点，如果没有返回null
        document.querySelect("选择器")
    querySelectorAll()返回的是元素的集合
        document.querySelectAll("选择器")
        document.getElementById()   返回匹配指定ID属性的元素节点
        document.getElementsByTagName() 返回所有指定标签的元素
        document.getElementsByClassName()   返回符合指定类名的所有元素
        document.getElementsName()      返回选择拥有name属性的HTML标签
    注意：
        querySelector是匹配的选择器，那么如果是选择器为id时参数应该是"#id名"

b、创建页面元素
    document.createElement()生成HTML元素节点
    document.createElement("标签名")
    var newp = document.createElement("p")
    document.body.appendChild(newp)
    
    因为直接创建一个按钮根本没办法直观看到，因此通过.appendChild方式添加到body当中
    .appendChild()方法的作用能够将代码创建的元素添加到指定位置
    createTextNode() 生成文本节点，
    createAttribute(“属性名”)生成一个新的属性对象节点，并返回它
        创建的属性节点使用value=进行赋值
        创建的属性节点使用setAttributeNode()进行赋值
    但是这样创建的元素并没有内容，也不存在属性，在页面开发的过程中实用性极差，
    因此如果需要创建一个带有内容或者带有属性的元素就需要
    <script>
        var ul = document.createElement("ul")
        var ul_style = document.createAttribute("style")
        ul_style.value = "list-style: none;n" +
            "            margin: 0;n" +
            "            padding: 0;"
        ul.setAttributeNode(ul_style)
        var list = ["xinwen","yule","junshi","wode"]
        for (var i=0;i<list.length;i++) {
    
            var li = document.createElement("li")
            var li_style = document.createAttribute("style")
            li_style.value = "display: inline-block; width: 100px;height: 30px;line-height: 30px;n" +
                "            text-align: center;background-color: antiquewhite;"
            li.setAttributeNode(li_style)
    
            var a = document.createElement("a")
            var a_style = document.createAttribute("style")
            a.innerText=list[i]
            a_style.value = "text-decoration: none;color:white;"
            a.setAttributeNode(a_style)
    
            li.appendChild(a);
            ul.appendChild(li)
        }
        document.body.appendChild(ul);
    </script>
    
c、操作页面元素

    元素节点特性方法：getAttribute("属性名")、setAttribute("属性名","属性值")、removeAttribute("属性名")
    元素节点的style属性
        var divStyle = document.querySelector("div").style;
            divStyle.backgroundColor ="red"
            divStyle.border="1px solid black"
            divStyle.cssFloat = "left"
            divStyle.fontSize = "50px"
        规则
            将横杠从css属性名去除，然后将横杠后的第一个字母大写
            css属性名是javascript保留字的，在属性名之前需要加上字符串“css”
            style对象的属性值都是字符串，而且包括单位
    元素节点的style属性的cssText写法(读写和删除)
        style.cssText="css样式"
        divStyle.style.cssText="color:red;text-align:center"
    元素节点的style属性方法setProperty()、getPropertyValue()、removeProperty()
        setProperty(propertyName,value) 设置某个css属性
        getPropertyValue(propertyName)  读取某个css属性
        removeProperty(propertyName)    删除某个css属性
        第一个参数是css属性，可以是连字符
        var divStyle = document.querySelector("div").style;
        divStyle.setProperty("background*color","red")
        divStyle.getPropertyValue("background-color")
        divStyle.removeProperty("background-color")