javascript dom bom

Dom - 文档对象模型 Document Object

Dom 是W3c 标准 定义了访问HTML 和 XML 文档的标准
提供了 API 对页面的节点进行操作
Dom 是关于如何获取 修改 添加 删除 html元素的标准

document-- --节点 整个文档 根节点

html-- --元素节点
text–文本节点
attr–属性节点
comment–注释节点

//查询是否有子节点 查询的时候不查询子节点的子节点 只查询子级元素
Dom 操作方法

  1. 查询是否有子节点
    var hasChildNodes = document.body.hasChildNodes();
    返回 布尔值 true 有
  2. 查询所有子节点
    childNodes
    var mychildNodes = document.body.childNodes;
    返回 数组类型 length
    1 名字 nodeName
    a.元素节点 元素的标签名
    b.文本节点# text
    c.备注# comment

2 类型 nodeType
3-- 文本节点
8-- 注释节点
1-- 元素
2-- 属性

3 值 nodeValue
元素的节点的值–null
注释–注释本身内容
文本–文本本身内容
属性–属性值

nextSibling // 获取下一个兄弟节点
previousSibling //获取上一个兄弟节点d

获取指定节点
1.通过id获取节点 // 一个
var my = document.getElementById(‘my’)

2.通过class 获取节点 // 得到一个数组
    var myc = document.getElementsByClassName('')
    myc[0].style.color="red"

3.通过标签名获取节点 // 得到一个数组
    var myElement = document.getElementsByTagName('')
    myElement[0]

4.通过name获取标签 // 得到一个数组
    var myname = document.getElementsByName('')[0] 

获取节点属性
my.getAttribute(‘属性名’)
设置节点属性
my.setAttribute(‘属性名’,‘设置的值’)

节点操作
1.添加节点:

1.新创建一个元素节点: document.createElement('')
2.新创建一个文本节点: document.createTextNode('文本内容')
3. 元素节点.appendChild('文本节点')

父节点.appendChild('子节点'); 父节点最后添加一个子节点

2.移动节点:
父节点.appendChild(‘需要移动的节点’);

3.删除节点:
父节点.removeChild(‘子节点’)

4.节点的替换:
父节点.replaceChild(新节点,被替换的节点)
1.新节点替换
a. 创建新节点 createElement
b. 创建新的文本节点 createTextNode
c. 创建好的新文本节点放入新节点中 appendChild
d. 替换 父节点.replaceChild(新节点,被替换的节点)
2.已有节点替换
a. 父节点A 被替换节点C 替换节点B
b. A.replaceChild(B,C)
5.插入节点
父节点.insertBefore(新节点,插入在哪个节点的前方)

6.节点的复制
要复制的节点.cloneNode(布尔值) true–复制自己+所有子节点 false–只复制自己不包含子节点内容

7.获取兄弟节点: nextElementSibling-- 下一个同级元素节点
previousElementSibling-- 上一个一个同级元素节点
8.文本节点的操作:
1.添加 文本节点.apendData(文本内容)
2.指定位置添加 文本节点.insertData(位置下标,添加的内容)
3.删除 文本节点.deleteData(下标,删除多少个)
4.替换 文本节点.replaceData(下标,替换的字符数目,文本内容)

节点操作css样式
节点.style.css属性=‘新值’ 内联样式
获取最终样式
document.defaultView.getComputedStyle(元素节点,null).样式名

innerHTML 属性 设置或返回表格行的开始和结束标签之间的 HTML
innerText 设置或返回元素的开始和结束标签之间的 Text 文本, 不识别元素标签
outerHTML 设置或返回表格行的开始和结束标签及之前的

event对象 页面进行交互的时候,事件就发生

事件流 页面接收事件的顺序
事件冒泡 IE 先从最基本的元素逐渐往上
事件获取 网景 最上一层元素往下,直到最精准的元素

事件指派方式
传统指派 onclick
只能绑定一个事件处理程序

现代指派 可以绑定多个处理程序   传参用function函数调用
addEventListener(事件名-没有on,事件的处理顺序-不加括号,布尔) 
true-事件捕获 false-事件冒泡,默认值
removeEventListener(事件名,取消的事件的处理顺序-不加括号,布尔) 
true-捕获阶段执行 false-冒泡阶段执行 ,默认值 
IE8 ji以下 绑定 attachEvent('onclick',事件)
        取消 detachEvent('onclick',事件)

事件类型
鼠标事件
onclick: 点击事件
onmousedown 按下
onmouseup 弹起
onmousemove 移动
onmouseout 移出
onmouseover 移入

键盘事件
onkeydown 键盘 按下 所有键可以触发
onkeyup    键盘弹起 所有键可以触发
onkeypress 键盘 按下 字符键可以触发

html事件
onfocus 获取焦点
onblur  失去焦点
onscorll 滚动条
onresize 窗口大小改变
onload 页面加载完毕
onchange 元素内容发生变化 input ,textarea,select option

事件对象
    阻止冒泡
    stopPropagation();
    cancelBubble = true //ie 阻止冒泡

    target // 获取事件源

    key //监听按键
    keyCode //按键值

阻止默认行为
a οnclick=“return false”
form οnsubmit=“return false”
e.preventDefault();

BOM 对象

Browser Object Model 浏览器对象模型
功能
    操作浏览器窗口
    提供导航对象
    提供定位对象
    提供跟屏幕相关对象
    提供对 cookie 的支持
体系结构
    window对象:Javascript的最顶层对象,BOM对象都是windows 对象的属性
        Dom-document 表示浏览器中加载页面的文档对象
        location对象 包含了浏览器当前的 URL 信息
        navigator对象 包含了浏览器本身的信息
        screen对象包含了客户端屏幕及渲染能力的信息
        history对象包含了浏览器访问网页的历史信息
        window 常用方法
        window.open('url','新窗口名称','窗口特征')
        window.close();
        window.print();
        setTimeout(要执行的函数,延迟时间)-- 延迟多少毫秒执行
        setInterval-- 每隔多少毫秒执行一次
        clearTimeout(要清除的定时器) 清除定时器时定时器必须已经被触发
        clearInterval(要清除的定时器)

获取滚动条当前位置方式
    console.log(document.body.scrollTop);
    1.Dom 方式
    console.log(document.documentElement.scrollTop);
    document.documentElement.scrollTop = 0
    
    2. Bom提供获取方式
     console.log(window.scrollY);
     window.scrollTo(0, 0)
     window.scrollTo(x轴, y轴)

Form 表单

//获取表单组件
var formElements = myForm.elements; //所有组件
console.log(formElements);
var myInput = myForm.elements['username'] // name / id 都可以获取到
console.log(myInput);
var mySelect = myForm.selsctName; // 返回一个or 数组
console.log(mySelect);
var myCheckbox = myForm.ckboxName;
console.log(myCheckbox);
// 表单事件
myInput.onselect //文本框拖黑文字之后触发
mySelect.onchange = function() {
    console.log(mySelect.value); //选中的 option的 value
    console.log(mySelect.options); //option  数组
    console.log(mySelect.selectedIndex); // 选中的option  下标
    console.log(mySelect.options[0].selected); // 判断指定的option 是否被选中 bool

    console.log(mySelect.options[mySelect.selectedIndex].text); // 获取选中的 option 的文本
}
this.checked//是否被选中  bool

数组 对象

var arr = [
    {
            name:'4',
            age:'18',
            sleep:function(){
                
            }
    },
    {
            name:'4',
            age:'18',
            sleep:function(){
                
            }
    }
]
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页