美文网首页
DOM操作节点

DOM操作节点

作者: codeSirCao | 来源:发表于2017-06-23 00:11 被阅读21次

节点操作

每一个节点都有一个childNodes属性 其中保存着一个nodeList对象(类数组)可以动态查询DOM结构变换会自动反映到NodeLIst中
eg;
var firstChild=obj.childNodes[0]===var firstChild=obj.childNodes.item(1) item方法获取第一个

具有length属性的 的对象转化真真正的数组

1 var toArray = function(s){
2 try{
3 return Array.prototype.slice.call(s);//针对IE8以及以下的因为IE8 那个时候NodeList是COM对象7
4 } catch(e){
5 var arr = [];
6 for(var i = 0,len = s.length; i < len; i++){
7 //arr.push(s[i]);
arr[i] = s[i]; //据说这样比push快
8 }
9 return arr;
10 }
11 }
直接说节点
获取
parentNode 父节点唯一元素节点 (offsetParent 最近的定位父级)
childNodes 所有的节点 children 所有的元素节点
nextSlibing nextElementSibling(H5新加)后一个兄弟 节点 元素
previousSbling previousSibling(H5)前一个兄弟
lastChild firstChild
操作
appendChild()
insertBefore()
replaceChild(new,old,index)
removeChild()
cloneNode()
文档节点
document.documentElement//html
document.body//body
以上2个所有浏览器都支持
document.documentType//文档声明 Ie8 为空
文档信息
document.url//完整的url
document.domian//域名(可设置)//可以解决跨域
documet.referrer
一些偏门获取 上节提过 加以补充记得是document下的对象o images可以不用
images[0]//第一个img
images.namedItem["有name的img元素的name"]==images[“name”]
document.images[] document.forms[] document.links[] document.ahchors[] (带有name的a)


不看不知道一看真是的怎么还有这么多不知道

相关文章

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • Dom操作

    操作节点 获取节点 获取子节点 更新DOM innerHTMLinnerTEXT 插入DOM appendChil...

  • 05-DOM相关知识点讲解

    DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...

  • JQuery---dom相关节点操作

    dom相关节点操作 /* DOM操作管理 属性...

  • 第十七章 DOM基础

    要点: DOM介绍 查找元素 DOM节点 节点操作 什么是 DOM? DOM即文档对象,针对HTML和XML文档的...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • DOM

    一.dom操作 dom的组成 元素节点属性节点文本节点 通过nodeType查看类型 1 元素节点 ,2 属性节...

  • DOM

    一、对象基础(补充) 二、DOM获取节点 三、间接获取节点 四、DOM节点的添加和删除 五、DOM属性操作 六、练...

  • DOM操作-节点操作

    创建节点 创建属性节点 插入节点 删除节点 remove() 该节点包含的所有后代节点都会被删除 返回被已删除的节...

  • dom操作.节点操作

    尝试使用另一种方法遍历

网友评论

      本文标题:DOM操作节点

      本文链接:https://www.haomeiwen.com/subject/sqjqcxtx.html