节点中常用的属性和方法

1.节点类型的属性

(1)console.log()  浏览器的优化行为,当做标签打印在控制台上

(2)console.dir() 以对象的形式打印在控制台上

var box = document.getElementById(‘box‘)
    console.log(box)
    console.dir(box)

(3)元素.nodeType   返回节点的类型,标签节点是1

(4)元素.nodeName  返回节点的名称,大写的标签名

(5)元素.nodeValue  标签节点的Value  返回的是null

 var box = document.getElementById(‘box‘)
    console.log(box)
    console.dir(box.nodeType)  //1
    console.dir(box.nodeValue)  //null
    console.dir(box.nodeName)   //DIV

2.操作节点的层级的属性

(1)元素.childNodes  元素内的所有节点   返回一个伪数组 存储了所有的子节点

console.dir(box.childNodes)  //NodeList(7)

(2)元素.children  元素内的所有子元素(标签节点)   返回一个伪数组 存储了所有的子元素

console.dir(box.children)  //HTMLCollection(3)

(3)元素.parentNode  返回父节点(父元素)

console.log(box.parentNode)

(4)元素.nextElementSibling  返回下一个兄弟元素

console.log (box.nextElementSibling)

(5)元素.previousElementSibling  返回上一个兄弟元素

console.log(box.previousElementSibling)

(6)元素.firstElementChild/元素.lastElementChild  第一个子元素 和最后一个子元素

console.log(box.firstElementChild)
 console.log(box.lastElementChild)

3.操作节点的方法

(1)父节点.appendChild(子节点)    添加子节点,有剪切的效果

box.appendChild(p)

(2)父节点.insertBefore(要添加的子节点,参考的子节点)  有剪切效果

box.insertBefore(p,span)

(3)父节点.removeChild(子节点)  移除节点

 box.removeChild(info)

(4)父节点.replaceChild(替换的子节点,被替换的子节点)   有剪切效果

box.replaceChild(p,span)

(5)父节点.cloneNode(true/false)     克隆节点 不传,相当于传了一个false  只克隆节点本身

 console.log( box.cloneNode())

4.动态创建元素

(1)元素.innerHTML=html形式的字符串  可以识别标签  可以用来创建元素,并且渲染到页面上

 box.innerHTML=‘ <span>span内容</span>‘

(2)document.createElement(‘html形式的字符串‘)  专门用来创建元素,返回一个新的元素,但是这个元素不在dom树上

 var box = document.getElementById(‘box‘)
   var p= document.createElement(‘p‘)
    box.appendChild(p)v

(3)document.write(‘html形式的字符串‘)  直接写在script不会覆盖原来的内容,放在事件函数中会覆盖原来的内容

document.write(‘<h1>哈哈哈</h1>‘)
   var box = document.getElementById(‘box‘)
    var bt = document.getElementById(‘bt‘)
 bt.onclick=function(){
  document.write(‘<h1>哈哈哈</h1>‘)
 }

原文地址:https://www.cnblogs.com/zhaodz/p/11619757.html

时间: 2024-11-08 19:51:43

节点中常用的属性和方法的相关文章

java中常用的包、类、以及包中常用的类、方法、属性-----io包

由于最近有需要,所以下面是我整理的在开发中常用的包.类.以及包中常用的类.方法.属性:有需要的看看 java中常用的包.类.以及包中常用的类.方法.属性 常用的包 java.io.*; java.util.*; java.lang.*; java.math.*; java.sql.*; java.text.*; java.awt.*; javax.swing.*;   包名 接口 类 方法 属性 java.io.*; java.io.Serializable实现序列化 java.io.Buffe

javascript中常用坐标属性offset、scroll、client

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在

FileStream 常用的属性和方法

FileStream常用的属性和方法 (转) 对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanWrite 判断当前流是否支持写入,返回bool值,True表示可以写入 方法: Read() 从流中读取数据,返回字节数组 Write() 将字节块(字节数组)写入该流 Seek() 设置文件读取或写入的起始位置 Flush() 清除该流缓冲区,使得所有

Spring中常用的hql查询方法(getHibernateTemplate()) 【转】

一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有User对象 二.find(String queryString , Object value); 示例:this.getHibernateTemplate().find("from bean.User u where u.name=?", "test"); 或模糊查询:th

FileStream常用的属性和方法 (转)

对流进行操作时要引用 using System.IO; 命名空间 FileStream常用的属性和方法: 属性: CanRead 判断当前流是否支持读取,返回bool值,True表示可以读取 CanWrite 判断当前流是否支持写入,返回bool值,True表示可以写入 方法: Read() 从流中读取数据,返回字节数组 Write() 将字节块(字节数组)写入该流 Seek() 设置文件读取或写入的起始位置 Flush() 清除该流缓冲区,使得所有缓冲的数据都被写入到文件中 Close() 关

Android中常用的bitmap处理方法

收集了很多bitmap相关的处理方法,几乎全部应用在项目中,所以特记录下! package com.tmacsky.utils; import java.io.ByteArrayOutputStream; import java.io.IOException; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.gr

php中常用到的魔术方法

PHP面向对象中有很多功能很强大,不得不说的就是魔术方法了.今天抽出时间记录几个比较常用的魔术方法: 1.__construct 这是构造函数,指当一个类被实例化的时候就会自动调用的函数.那我们可以在这里初始化变量的值.例如: class Score { public $chinese; public $english; public $math; public function __construct($chinese=100,$english=99,$math=98) { $this->ch

【转】JavaScript 节点操作 以及DOMDocument属性和方法

最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错. 属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Imple

【学习ios之路:Objective-C】OC中常用的系统排序方法

①.OC中常用排序方法: 1).不可变数组 - (NSArray *)sortedArrayUsingSelector:(SEL)comparator; - (NSArray *)sortedArrayUsingComparator:(NSComparator)cmptr; 2)可变数组 - (void)sortUsingSelector:(SEL)comparator; - (void)sortUsingComparator:(NSComparator)cmptr; 3).字典排序 - (NS