WebAPI

属性的操作

  1. getAttribute():获取一个img的src,或a链接的href
node.getAttribute('id')
  1. creatAttribute():用于创建(或获取)属性名
attribute = document.createAttribute(name)//参数name,是属性的名称
  1. setAttribute():用于设置属性和值

    var node = document.getElementById("div1");
    node.setAttribute("my_attrib", "newVal");  //括号中为“属性名+值”
    
  2. removeAttribute():用于删除对应属性

node.removeAttribute('id')

Element对象,属性(或方法)

1. 几个常用属性

nodeName:元素标签名,还有个类似的tagName

nodeType:元素类型

className:类名

id:元素id

children:子元素列表(HTMLCollection)

childNodes:子元素列表(NodeList)

firstChild:第一个子元素

lastChild:最后一个子元素

nextSibling:下一个兄弟元素

previousSibling:上一个兄弟元素

parentNode、parentElement:父元素

2. 查询元素
  1. getElementById()

  2. getElementByClassName()

    可以获取到一个或多个类选择器,返回的对象是一个类数组,可以通过下标去访问,但是没有push等调用数组的方法。

    我们可以获知,document.getElementsByClassName() 所调用的是html里类的集合,其类型为 HTMLCollection(),是一种页面元素的集合

  3. getElementsByName()

    通过此方法可以获取页面元素中带有name属性的html元素。比如form、img、frame、embed和object,返回一个NodeList格式的对象,不会实时反映元素的变化。

  4. querySelector()querySelectorAll()

  5. getElementsByTagName()

    此方法返回所有指定标签的元素(搜索范围包括本身),返回值是一个HTMLCollection对象,也就是说,搜索结果是一个动态集合,任何元素的变化都会实时反映在返回的集合中。

3.创建元素
  1. createElement() 创建一个新的元素放到页面上

  2. createTextNode()

    光出现元素标签还不够,我们可通过**createTextNode()**去创建(或生成)一个文本,将文本的内容放入元素中

  3. createDocumentFragment()

    该方法用来**生成一个存在于内存的dom片段,**但不属于当前文档。即不会生成一个标签,虚拟生成,常用于生成复杂的dom结构,然后插入当前文档。

    正因为它不属于当前文档,所以并不参与页面的渲染加载的过程,它的任何改动都不会引发网页的重新渲染。比直接修改当前文档的DOM有更好的性能表现。

4. 修改元素
  1. appendChild()

    在元素末尾添加元素。把一个dom对象放入在另外一个对象的内部作为它的孩子

  2. insertBefore()

    在某个元素之前插入元素

  3. replaceChild()

    **replaceChild()**接受两个参数:要插入的元素和要替换的元素

5. 删除元素

removeChild() 用于删除元素

6. clone元素

​ 克隆一个完成的dom节点。

​ 方法有一个布尔值参数,传入true的时候会深复制,也就是会复制元素及其子元素(IE还会复制其事件),false的时候只复制元素本身

document对象

1. 常用属性
 document.doctype
 document.title
 document.characterSet
 document.head
 document.body
 document.images
2. document.readyState

readyState属性 返回当前文档的状态,共有三种可能的值

  • loading:加载HTML代码阶段,尚未完成解析
  • interactive:加载外部资源阶段
  • complete:全部加载完成
3. document.compatMode

compatMode 属性 返回浏览器处理文档的模式,可能的值为

  • BackCompat:向后兼容模式,也就是没有添加DOCTYPE
  • CSS1Compat:严格模式,添加了DOCTYPE
4. document.location

用于获取一个url

可直接使用location,如:

document.location === location //true
document.location === window.location  //true

总结:document.location === location === window.location

location属性返回一个只读对象,提供了当前文档的URL信息

5. document.write()

用**document.write()**方法时,即向当前文档写入内容,只要当前文档还没有用close方法关闭,它所写入的内容就会追加在已有内容的后面。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值