zoukankan      html  css  js  c++  java
  • Dom所有的属性,方法,和事件

    nodeType  属性值是代表节点类型的数字  只读

    节点类型:

    • 元素节点  ->  1
    • 属性节点  ->  2
    • 文本节点  ->  3
    • 注释节点  ->  8
    • document节点 ->  9
    • DocumentFragment节点  -> 11

    nodeName 属性值取决去节点类型 ,只读,不能写

    • 元素节点值为大写的元素标签名        document.body.nodeName    //"BODY"
    • document节点值为 "#document"     document.nodeName     //"#document"
    • 文本节点的nodeName值为 "#text"   
    • 注释节点的nodeName值为 "#comment"      

    nodeValue      属性值是Text节点或Comment节点的文本内容 ,可读可写

    hasChildNodes()方法 判断当前节点是否有子节点,有返回true,否则false

    ownerDocument  属性表示指向整个文档的文档节点,通过这个属性不能层层回溯到顶端,而是可以直接访问文档节点。

    normalize()    将多个相邻文本节点合并

    splitText()    将一个文本节点分割成两个文本节点,按照指定位置分割nodeValue值,原来的节点包含从开始到指定位置之前的值,新文本节点将包含剩下的值。

    返回新文本节点。分割文本节点是从文本提取技术的一种常用Dom解析技术。

    遍历(查)节点树  都是只读

    parentNode      属性指向父节点

    childNodes      子节点们,一个nodeList对象里面存放子节点们,基于Dom结构动态执行查询结果,当Dom结构变化时能自动反应在NodeList对象中,是个类数组。

    firstChild      第一个子节

    lastChild       最后一个子节点

    nextSibling     后一个兄弟节点

    previousSibling 前一个兄弟节点

    遍历(查)元素节点树 都是只读

    parentElement        当前元素父元素节点

    children             子元素节点们

    firstElementChild    第一个元素节点

    lastElementChild     最后一个元素节点

    nextElementSibling   后一个兄弟元素节点

    previousElementChild 前一个兄弟元素节点 

    操作某个节点的子节点(NodeList列表),也就是说要使用下面的方法必须先取得父节点

    appendChild()  1个参数:要插入的节点,返回要添加的节点。

    该方法向NodeList列表末尾添加节点,如果传入的节点是文档的一部分了,就会将原来位置的节点转移到最后一个。

    insertBefore() 2个参数:要插入的节点,作为参照的节点,返回要插入的节点。

    如果第二个参数为null,则与appendChild操作相同

    replaceChild() 2个参数:要插入的节点,要替换的节点,返回要被替换的节点,同时要插入的节点占据其位置。

    removeChild()  1个参数:要移除的节点,返回要移除的节点 

    cloneNode() 1个参数 true 或 false,返回复制的节点。

    true深克隆:复制节点及整个节点子树,false浅克隆:只复制节点本身。

    document下的属性

    document.title     取得<title>元素中的文本--显示在浏览器窗口的标题 可修改

    document.URL       取得地址栏显示的url

    document.domain    取得域名 可修改

    document.referrer  取得来源页面的url

    document.documentElement  取得对<HTML>的引用

    document.body             取得对<body>的引用

    html5 document新增属性

    document.head    取得对<head>的引用

    document.readState  有两个可能的值:loading 正在加载完文档 complete:已经加载文档

    获取元素引用的属性和方法

    只有HTMLDocument类型才有的方法

    • getElementById()      
    • getElemenstByName()    返回带有给定name特性的所有元素(一个HTMLcollection对象)

    HTMLDocument 和 HTMLElement 类型都有的方法

    • getElementsByTagName()     返回一个HTMLcollection对象
    • getElementsByTagName("*")  返回文档上的所有元素个HTMLcollection对象
    • getElementsByClassName()   返回个HTMLcollection对象
    • querySelector()           参数可根据css的写法  返回符合条件的第一个元素  
    • querySelectorAll()         返回符合条件的NodeList对象

    HTMLcollection对象下的属性 namedItem() 通过元素的name特性取得集合中的项。也可以同过中括号里面放字符串,在后台会自动调用namedItem方法。

    document下的一些特殊集合,这些集合都是HTMLCollection对象

    document.anchors  包含文档中所有带name特性的a元素

    document.forms    包含文档中的所有<form>元素  与document.getElementByTagName("form")得到的结果相同

    document.images   包含文档中所有的<img>元素   与document.getElementByTagName("img")得到的结果相同

    document.links    包含文档中所有带href特性的<a>元素

    每个HTML元素都存在下列标准特性 都可修改

    id : 文档中唯一标识符

    title : 有关元素附加说明信息,鼠标滑过才会出现提示

    dir : 语言的方向,值为 ltr left-to-right 从左往右。rtl 从右往左。

    className : 元素指定的css类。

    例:<div id="myDiv" class="bd" title="Body text" dir="ltr"></div

    var div = document.getElementById("myDiv");
    alert(div.id); //"myDiv""
    alert(div.className); //"bd"
    alert(div.title); //"Body text"
    alert(div.dir); //"ltr"

    取得特性,每个元素都有一或多个特性 。所有的特性都是属性,直接给属性赋值就可以给特性赋值。

    getAttribute()  取得元素的特性值(可以是自定义特性)

    setAttribute()  设置元素的特性值(可以是自定义特性)两个参数:要设置的特性名 特性值

    removeAttribute() 删除元素的特性

    创建节点

    document.createElement() 创建元素节点

    documente.createTextNode() 创建文本节点

    document.createComment()  创建注释节点

    document.createDocumentFragment()  创建文档碎片节点

    webkitMatchesSelector() 参数:css选择符。 如果调用元素与该选择符匹配返回true,否则false

    操作类名:元素的classList属性,包含一个DOMTokenList对象。这个元素下的类名列表 classList下有如下方法

    add(value) 将给定的字符串添加到列表中。  添加类名

    contains(value)元素是否有给定的类名 有返回true,否则false

    remove(value) 从列表中删除给定类名

    toggle(value)列表中有给定类名删除,没有就添加这个类名

    插入HTML文本

    innerHTML

    outerHTML

    insertAdjecentHTML()方法  两个参数:插入位置 要插入的HTML文本

    其中第一个参数只能是下列值之一

     

    插入兄弟元素

    • "beforebegin":当前元素之前插入兄弟元素
    • "afterend" :在当前元素之后插入兄弟元素

    插入子元素

    • "afterbegin" : 在当前元素之下的一个子元素之前插入新的子元素
    • "beforeend" : 在当前元素之下的最后插入子元素

    Element 元素下的方法

    ScrollIntoView() 元素调用这个方法可以出现在视口中 参数:true:元素顶部与视口顶部平齐   false:元素底部与视口底部平齐

    contains()  调用元素时候包含参数元素 包含true 不包含false

  • 相关阅读:
    matlab基础知识
    reverse number
    C++基础知识(一)
    ES6 let const学习
    [ZZ]一名IT从业者的英语口语能力成长路径
    使用windows Live Writer 以及office word 2013发布文章到博客园总结
    CString.format的用法
    Cstring 与 string 注意点
    卡尔曼滤波应用
    linux 重新挂载分区(教程)
  • 原文地址:https://www.cnblogs.com/jiaobaba/p/12312714.html
Copyright © 2011-2022 走看看