JavaScript笔记(5)_苏颜_前端开发者

1.DOM操作

常用的DOM操作
document.getElementById(id);
//返回指定id的元素,通用
document.getElementsByTagName(tagName);
//返回带有指定标签名的对象的集合,通用

document.getElementById(id);
//返回指定id的元素,通用
document.getElementsByTagName(tagName);
//返回带有指定标签名的对象的集合,通用

/* 不常用 */
getElementsByClassName(className);  
//返回指定类名的元素集合,不兼容IE7、8,其他浏览器支持
getElementsByName();
//返回指定name属性元素的集合

/* 不常用 */
getElementsByClassName(className);
//返回指定类名的元素集合,不兼容IE7、8,其他浏览器支持
getElementsByName();
//返回指定name属性元素的集合

DOM树中元素与元素之间的关系:父子、兄弟

假如现在有一个DOM元素为obj

找DOM节点

1.找父节点

/* 通用 */

obj.parentNode;

/* 通用 */

obj.parentNode;

2.找兄弟节点

/* 不常用,应为不兼容 */

obj.nextSibling;//找obj“下一个”兄弟节点,这个属性只有IE7、8认识   

obj.nextElementSibling;//找obj“下一个”兄弟节点,其他浏览器认识  

obj.previousSibling;//找obj“上一个”兄弟节点,这个属性只有IE7、8认识  

obj.previousElementSibling;//找obj“上一个”兄弟节点,其他浏览器认识  

/* 兼容性写法:先通用 || 后IE7、8 */

var next = obj.nextElementSibling || obj.nextSibling;
var last = obj.previousElementSibling || obj.previousSibling;

/* 不常用,应为不兼容 */

obj.nextSibling;//找obj“下一个”兄弟节点,这个属性只有IE7、8认识

obj.nextElementSibling;//找obj“下一个”兄弟节点,其他浏览器认识

obj.previousSibling;//找obj“上一个”兄弟节点,这个属性只有IE7、8认识

obj.previousElementSibling;//找obj“上一个”兄弟节点,其他浏览器认识

/* 兼容性写法:先通用 || 后IE7、8 */

var next = obj.nextElementSibling || obj.nextSibling;
var last = obj.previousElementSibling || obj.previousSibling;

3.找子节点


/* 找第一个子节点 */
obj.firstElementChild;通用
obj.firstChild;//只有IE7、8认识,不通用

/* 找最后一个子节点 */
obj.lastElementChild;//通用
obj.lastChild;//只有IE7、8认识,不通用

/* 兼容性写法:先通用 || 后IE7、8 */
var firstLi = obj.firstElementChild || obj.firstChild;
var lastLi = obj.lastElementChild || obj.lastChild;

/* 找所有子节点 */
obj.childNodes;//w3c标准,但会找到空文本的节点,不常用
obj.children;//非标准,只会计算“真正”的子元素,常用


/* 找第一个子节点 */
obj.firstElementChild;通用
obj.firstChild;//只有IE7、8认识,不通用

/* 找最后一个子节点 */
obj.lastElementChild;//通用
obj.lastChild;//只有IE7、8认识,不通用

/* 兼容性写法:先通用 || 后IE7、8 */
var firstLi = obj.firstElementChild || obj.firstChild;
var lastLi = obj.lastElementChild || obj.lastChild;

/* 找所有子节点 */
obj.childNodes;//w3c标准,但会找到空文本的节点,不常用
obj.children;//非标准,只会计算“真正”的子元素,常用

DOM节点操作

在DOM操作里,所有的创建、插入、删除操作,都必须通过父节点来插入子节点和删除子节点

  • 节点文本操作: 控制节点文本
  • (1) innerText: 会原封不动的显示字符串(不常用)

  • (2) innerHTML: 会解析这个字符串,如果该字符串中有html标记成分,就会被按照html的规范,将标记解析出来后显示(常用)

  • 节点文本操作: 控制节点文本
  • (1) innerText: 会原封不动的显示字符串(不常用)

  • (1) innerText: 会原封不动的显示字符串(不常用)

    (1) innerText: 会原封不动的显示字符串(不常用)

  • (2) innerHTML: 会解析这个字符串,如果该字符串中有html标记成分,就会被按照html的规范,将标记解析出来后显示(常用)

  • (2) innerHTML: 会解析这个字符串,如果该字符串中有html标记成分,就会被按照html的规范,将标记解析出来后显示(常用)

    (2) innerHTML: 会解析这个字符串,如果该字符串中有HTML标记成分,就会被按照HTML的规范,将标记解析出来后显示(常用)

    4.动态创建DOM节点

    /* 尾部添加节点 */
    
    var obj = document.createElement("tagName");
    //此时只在内存里创建了节点,还没有写入HTML文档中
    var fatherNode = document.getElementById("fatherId");
    //拿到父节点
    fatherNode.appendChild(obj);
    //在父节点内部所有子节点尾部追加新建的节点
    //此时节点才创建完成
    

    /* 尾部添加节点 */

    var obj = document.createElement("tagName");
    //此时只在内存里创建了节点,还没有写入HTML文档中
    var fatherNode = document.getElementById("fatherId");
    //拿到父节点
    fatherNode.appendChild(obj);
    //在父节点内部所有子节点尾部追加新建的节点
    //此时节点才创建完成

    /* 任意位置插入节点 */
    var newChild = document.createElement("tagName");
    var fatherNode = document.getElementById("fatherId");
    var refChild = document.getElementById("refChild_Id");
    fatherNode.insertBefore(newChild, refChild);//newChild: 新建节点   refChild: 参照节点  
    //在参照节点之前插入新节点,参照节点可以为null,此时新建节点会被插入尾部
    

    /* 任意位置插入节点 */
    var newChild = document.createElement("tagName");
    var fatherNode = document.getElementById("fatherId");
    var refChild = document.getElementById("refChild_Id");
    fatherNode.insertBefore(newChild, refChild);//newChild: 新建节点 refChild: 参照节点
    //在参照节点之前插入新节点,参照节点可以为null,此时新建节点会被插入尾部

    /* 删除节点 */
    
    var fatherNode = document.getElementById("fatherId");
    var oldChidNode = document.getElementById("oldChild_Id");
    fatherNode.removeChild(oldChildNode);
    

    /* 删除节点 */

    var fatherNode = document.getElementById("fatherId");
    var oldChidNode = document.getElementById("oldChild_Id");
    fatherNode.removeChild(oldChildNode);

    动态设置DOM元素的属性

    写属性: obj.setAttribute("valueName","value");
    读属性: obj.getAttribute("valueName");

    2.控制样式

    3.动画效果

    » 本文来自:前端开发者 » 《JavaScript笔记(5)_苏颜_前端开发者》
    » 本文链接地址:https://www.rokub.com/73737.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!