JavaScript<四>

最新推荐文章于 2022-11-10 23:41:14 发布

zhy0509

最新推荐文章于 2022-11-10 23:41:14 发布

阅读量179

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/zhy0509/article/details/78860955

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、DOM
getAttribute(“属性名”) 获取属性值

setAttribute(“属性名“，”新的属性值 “) 设置属性值

<body>
<a href="www.baidu.com" target="_blank">百度</a>
<button class="btn">获取/改变值</button>
<script>
    var btn=document.getElementsByClassName("btn")[0];
    btn.onclick=function(){
        /*document.write(document.getElementsByTagName("a")[0].getAttribute("href"));*/
        document.write(document.getElementsByTagName("a")[0].setAttribute("href","www.hao123.com"));
    }
</script>
</body>

Dom节点属性

获取子元素 ChildNodes

childNodes() 包含空节点

children() 不包含空节点

第几个子节点： childNodes[index] /children[index]

firstChild 第一个子节点
lastChild 最后一个子节点

firstElementChild 不包含空第一个子节点
lastElementChild 不包含空最后一个子节点

<body>
<!--<p><span>hello1</span><span>hello2</span><span>hello3</span><span>hello4</span></p>-->
<p>
    <span>hello1</span>
    <span>hello2</span>
    <span>hello3</span>
    <span>hello4</span>
</p>
<script>
    var newp=document.getElementsByTagName("p")[0];
    //包含空节点
    /*alert(newp.childNodes.length)
    alert(newp.childNodes[2].innerText)
    alert(newp.firstChild.innerText)//包含空节点的第一个和最后一个子节点
    alert(newp.lastChild.innerText)*/
    //不包含空节点
    alert(newp.children.length)
    alert(newp.children[2].innerText)
    alert(newp.firstElementChild.innerText)//不包含空节点的第一个和最后一个子节点
    alert(newp.lastElementChild.innerText)
</script>
</body>

这里写图片描述

parentNode() 父节点

<body>
<p>
    <span>hello1</span>
    <span class="one">hello2</span>
    <span>hello3</span>
    <span>hello4</span>
</p>
<script>
    var one=document.getElementsByClassName("one")[0];
    alert(one.parentNode.nodeName)
    alert(one.parentNode.parentNode.nodeName)
</script>
</body>

这里写图片描述

兄弟节点:

nextSibling 下一个兄弟节点包含空节点
previousSibling 前一个兄弟节点包含空节点

nextElementSibling 下一个兄弟节点不包含空节点、
previousElementSibling 前一个兄弟节点不包含空节点

<body>
<!--<p><span>hello1</span><span class="two">hello2</span><span>hello3</span><span>hello4</span></p>-->
<p>
    <span>hello1</span>
    <span class="two">hello2</span>
    <span>hello3</span>
    <span>hello4</span>
</p>
<script>
    var two=document.getElementsByClassName("two")[0];
    /*alert(two.nextSibling.innerText)
    alert(two.previousSibling.innerText)*/
    alert(two.nextElementSibling.innerText)
    alert(two.previousElementSibling.innerText)
</script>
</body>

这里写图片描述

offsetParent 第一个有定位属性的父节点，如果没有则返回body

document.createElement(“要添加的节点标签名”) 创建元素节点

<body>
<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
    <li>444444</li>
</ul>
<script>
    var newli=document.createElement("li");
    var newul=document.getElementsByTagName("ul")[0];
    newli.className="one";
    newli.innerText="hello world";
    newul.appendChild(newli);
</script>
</body>

这里写图片描述

父节点.appendChild(新节点) 在父节点的内部后面插入新节点

insertBefore(新节点，子节点) 把新节点内容添加到子节点的前面

事件：

onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。

事件冒泡

事件捕获

阻止事件冒泡

1、event.stopPropagation(); 阻止冒泡

<body>
<div>
    <p>
        <span>hello,world!</span>
    </p>
</div>
<a href="javascript:void(0)">百度</a>
<script>
    var ndiv=document.getElementsByTagName("div")[0];
    ndiv.onclick=function(){
        alert("我是点击div弹出的框")
    }
    var np=document.getElementsByTagName("p")[0];
    np.onclick=function(e){
        alert("我是点击p弹出的框")
        e.stopPropagation();
    }
    var nspan=document.getElementsByTagName("span")[0];
    nspan.onclick=function(e){
        alert("我是点击span弹出的框")
        e.stopPropagation();
    }
    var na=document.getElementsByTagName("a")[0];
    na.onclick=function(e){
        e.stopPropagation();
        e.preventDefault();
        alert("111")
    }
</script>
</body>

这里写图片描述

2、event.preventDefault(); 阻止默认事件

阻止超链接默认事件：<a href="javascript:void(0)">百度</a>

3、return false;阻止默认事件，阻止冒泡事件；

zhy0509

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript<四>

1、DOM getAttribute(“属性名”) 获取属性值 setAttribute(“属性名“，”新的属性值 “) 设置属性值 <body><a href="www.baidu.com" target="_blank">百度</a><button class="btn">获取/改变值</button><script> var
复制链接

扫一扫

专栏目录