javascript dom部分

dom编程


实现结点的增删改查
同过dom可以动态改变文档内容
生成dom树；虚拟的存在，按此 来渲染


查看结点：
getElementById()       通过id名
getElementByName()     通过名称
getElementByClassName() 通过类名称
getElemByTagName（）通过标签名来寻找

getAttribute(“属性名”)

1..style方法，逐个给元素添加样式，速度慢；style.样式属性=“属性值”
1.className方法，直接给元素添加一个样式类，速度快。
var p = document.getElementById("qu");
    function change(){
//        document.getElementById("qu").className = "yut";
        p.className += " yut";
    }
3.cssText：可以一次性把多个样式写在样式文本中；
   p.style.cssText = "color:red;font-size:40px;text-align:center


获取行内样式的方法：
 var p = document.getElementById("yut");
    var style = p.style;
var style = getComputedStyle(p)  w3c 获取元素的所有样式；
var style = p.currentstyle   (IE专用格式，获取所有的样式）
浏览器版本的区分不适用浏览器对象
常使用的方法是判断浏览器特有的属性和方法。

dom层级关系
var  li1 = document.getElementById("li1");
    var  ul = li1.parentNode;  /*通过子元素获取父元素*/
    console.log(ul);
    /*通过父元素去查找所有子元素*/
    /*有bug元素和元素之间不允许换行*/
    var ul = document.getElementById("ul");
    var lis = ul.childNodes;
    console.log(lis);
    /*firstChild；通过父元素去查找第一个 子元素*/
    /*有bug元素和元素之间不允许换行*/


    var ul = document.getElementById("ul");
//    var li1 = ul.firstChild;/*无法获取到第一个子元素*/
    var li1 = ul.firstElementChild;/*可以获取到第一个子元素*/
    console.log(li1);
     /*lastChild:通过父元素查找最后一个子元素*/
    var ul = document.getElementById("ul");
    var li6 = ul.lastElementChild;
    console.log(li6);
parentNode：通过子元素获取父元素
childNodes  通过父元素获取子元素
firstChild  通过父元素获取第一个子元素
lastChild  通过父元素获取最后一个子元素
previousSibling;前一个子元素。
nextSibling:后一个元素；
attributes   获取当前元素结点的所有属性集合；
创建一个节点的方法
createElement（）
function newNode() {
        var oldImage = document.getElementById("ufo");获取老节点
        var newImage = document.createElement("img"); 创建新节点
        newImage.setAttribute("src","../../img/fengj.jpg" ); 添加图片属性，给于路径
        document.body.insertBefore(newImage,oldImage) ;添加新图片插入的位置
    }
cloneNode（true）翻倍复制   /*true 和false 表示子元素是否复制*/
 function copyNode() {
        var img = document.getElementById("ufo");  获取复制的节点
        var copyImage = img.cloneNode();/*复制图片*/  复制图片并创建结点
        document.body.appendChild(copyImage);  设置复制图片的插入位置
    }
appendChild：在父元素后面追加；（只有一个参数）


删除和替换节点的方法：
removeChild（）：删除节点
replaChild（）替换节点

什么是HTML DOM对象：
html中的每个节点都是DOM对象；每类对象都有一套属性和方法。最常用的的是table表格和各类表单的form元素对象。


HTML DOM对象属性访问：
对象名.属性；
table对象
rows[]
insertRows[]
deletRows[]
rowindex 返回该行在表格中的位置；


tablecell单元格对象
cell
insertcell
deletecell
cellindex
align
className